TypeScript Academy · บทเรียน

สถาปัตยกรรม tRPC

ทำความเข้าใจว่า tRPC ขจัดการทำสคีมา API ซ้ำซ้อนได้อย่างไร

สถาปัตยกรรม tRPC เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

ปัญหาตั้งแต่ต้นทางถึงปลายทาง

ในแอปเว็บทั่วไป เซิร์ฟเวอร์จะกำหนดส่วนติดต่อโปรแกรมประยุกต์ และไคลเอนต์จะเรียกใช้ การทำให้ชนิดข้อมูลของทั้งสองฝั่งสอดคล้องกันเป็นเรื่องยาก: เมื่อเปลี่ยนฟิลด์บนเซิร์ฟเวอร์ ไคลเอนต์อาจทำงานผิดพลาดระหว่างการทำงานโดยไม่มีสัญญาณเตือน tRPC แก้ปัญหานี้ด้วยการแชร์ชนิดข้อมูลโดยตรง โดยไม่ต้องสร้างโค้ด

// Server: returns { id: number; name: string }
// Client: must know that shape exactly
// Without sync: runtime errors when they drift

tRPC คืออะไร

tRPC คือไลบรารีสำหรับสร้างส่วนติดต่อโปรแกรมประยุกต์ที่มีชนิดข้อมูลครบถ้วนใน TypeScript เซิร์ฟเวอร์จะกำหนดโพรซีเยอร์ ส่วนไคลเอนต์จะเรียกใช้โพรซีเยอร์เหล่านั้นราวกับเป็นฟังก์ชันภายในเครื่อง พร้อมการเติมข้อความอัตโนมัติและการตรวจสอบชนิดข้อมูลอย่างครบถ้วน ซึ่งอนุมานจากโค้ดของเซิร์ฟเวอร์

// Client call looks like a local function:
// const user = await client.user.byId.query(1);
// user is typed automatically from the server

ไม่ต้องสร้างโค้ด

ต่างจากกระบวนการทำงานของ GraphQL หรือ OpenAPI ตรงที่ tRPC ไม่ต้องมีขั้นตอนการสร้างโค้ด ไม่มีไฟล์โครงร่างให้คอมไพล์ และไม่มีไคลเอนต์ที่สร้างขึ้น ชนิดข้อมูลจะไหลจากเซิร์ฟเวอร์ไปยังไคลเอนต์ผ่านการอนุมานของ TypeScript ระหว่างการคอมไพล์เท่านั้น

// No .graphql files, no generated SDK
// Just import a type from the server package

ตัวกำหนดเส้นทางคือสัญญา

ศูนย์กลางของ tRPC คือตัวกำหนดเส้นทาง ซึ่งเป็นโครงสร้างต้นไม้ของโพรซีเยอร์ ได้แก่ การสอบถามและการกลายพันธุ์ ออบเจ็กต์ตัวกำหนดเส้นทางบนเซิร์ฟเวอร์ และโดยเฉพาะ ชนิดข้อมูลที่อนุมานได้จากออบเจ็กต์นั้น คือแหล่งความจริงเพียงแห่งเดียวที่แชร์กับไคลเอนต์

// appRouter (server) defines every procedure
// type AppRouter = typeof appRouter is the contract

การแบ่งปันประเภท

เซิร์ฟเวอร์ส่งออกเฉพาะประเภทของ router ไม่ใช่การทำงานภายใน client นำเข้าประเภทนั้นและใช้กำหนดประเภทให้ client แบบพร็อกซี ไม่มีโค้ดของเซิร์ฟเวอร์ถูกส่งไปยังเบราว์เซอร์ มีเพียงประเภทเท่านั้น ซึ่งจะถูกลบออกในเวลาสร้าง

// server.ts
export type AppRouter = typeof appRouter;

// client.ts
import type { AppRouter } from '../server';

คำสั่ง query และ mutation

โพรซีเยอร์มีสองประเภทหลัก query ใช้อ่านข้อมูลและโดยทั่วไปไม่เปลี่ยนแปลงผลลัพธ์เดิม ส่วน mutation ใช้เปลี่ยนข้อมูล ความแตกต่างนี้สอดคล้องกับการแคชและความหมายของ HTTP และกำหนดวิธีที่ client เรียกใช้คำสั่งเหล่านี้

// client.user.list.query()      -> read
// client.user.create.mutate(...) -> write

เวลาทำงานกับประเภท

tRPC มีสองชั้น ในเวลาทำงาน การเรียกใช้จะเป็น JSON ผ่าน HTTP และจัดการโดยอะแดปเตอร์ ส่วนเวลาคอมไพล์ ประเภท AppRouter ที่ใช้ร่วมกันจะตรวจสอบการเรียกใช้ทุกครั้งอย่างครบถ้วน เวลาทำงานมีชั้นบาง ๆ ส่วนคุณค่าคือความปลอดภัยด้านประเภท

// Runtime: POST /trpc/user.byId  body: {"input":1}
// Types: client.user.byId.query(1) is checked end to end

เหตุใดการอนุมานจึงดีกว่าการสร้างโค้ด

เนื่องจากประเภทต่าง ๆ ได้รับการอนุมาน จึงไม่มีขั้นตอนซิงค์ให้ลืม เมื่อแก้ไขโพรซีเยอร์ client จะสะท้อนการเปลี่ยนแปลงทันที โดยแสดงเส้นหยักสีแดงตรงจุดที่การเรียกใช้ไม่ตรงกัน ผลตอบกลับจึงเกิดขึ้นทันทีและอยู่ในเครื่องมือแก้ไขของคุณ

// Add a required input field on the server
// -> every client call missing it becomes a type error

tRPC เหมาะกับที่ใด

tRPC โดดเด่นในโมโนรีโพแบบฟูลสแตกที่ใช้ TypeScript ซึ่ง client และเซิร์ฟเวอร์ใช้ฐานโค้ดร่วมกัน เช่น แอป Next.js tRPC ไม่เหมาะสำหรับ API สาธารณะที่ภาษาอื่นเรียกใช้ สำหรับกรณีเหล่านั้นยังควรใช้สคีมาที่ไม่ขึ้นกับภาษา เช่น OpenAPI หรือ GraphQL

// Great: Next.js app, shared types, internal API
// Not ideal: public API for non-TS consumers

ภาพรวม

ลำดับการทำงานคือ กำหนดโพรซีเยอร์บน router ส่งออกประเภทของ router เชื่อมต่ออะแดปเตอร์ HTTP และสร้าง client ที่ระบุประเภทจากประเภทนั้น การเรียกใช้ทุกครั้งจะถูกตรวจสอบกับสัญญาของเซิร์ฟเวอร์ โดยไม่มีโค้ดที่สร้างขึ้นอัตโนมัติ บทเรียนถัดไปจะสร้างแต่ละส่วนขึ้นมา

// Roadmap:
// 1. initTRPC + procedures + appRouter
// 2. export AppRouter, create typed client
// 3. context + middleware for auth

เชื่อถือคอมไพเลอร์

แนวคิดสำคัญที่ต้องเปลี่ยนคือ สัญญาของ API อยู่ในประเภทที่คอมไพเลอร์บังคับใช้ ไม่ได้อยู่ในเอกสารหรือการตรวจสอบขณะทำงานเพียงอย่างเดียว หากคอมไพล์ผ่าน client และเซิร์ฟเวอร์ก็สอดคล้องกัน การรับประกันนี้คือความหมายของ "ความปลอดภัยด้านประเภทตั้งแต่ต้นจนจบ"

// If client.ts compiles, it matches the current server.

ตรวจสอบความเข้าใจ

ทดสอบความเข้าใจสถาปัตยกรรมของ tRPC

ทบทวน

คุณได้เรียนรู้รูปแบบการทำงานของ tRPC

router คือสัญญา และประเภทของ router คือแหล่งความจริงเพียงแหล่งเดียว
เซิร์ฟเวอร์ส่งออกเฉพาะประเภท AppRouter ไม่ใช่โค้ด
query ใช้อ่านข้อมูล ส่วน mutation ใช้เขียนข้อมูล เวลาทำงานใช้ JSON ผ่าน HTTP
ความปลอดภัยด้านประเภทมาจากการอนุมาน โดยไม่มีขั้นตอนสร้างโค้ด

ถัดไป: การกำหนด router และโพรซีเยอร์

คำถามที่พบบ่อย

บทเรียน “สถาปัตยกรรม tRPC” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “สถาปัตยกรรม tRPC” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “สถาปัตยกรรม tRPC”

ทำความเข้าใจว่า tRPC ขจัดการทำสคีมา API ซ้ำซ้อนได้อย่างไร คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “สถาปัตยกรรม tRPC” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม

ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ TypeScript Academy