TypeScript Academy · บทเรียน

การอนุมานชนิดข้อมูลระหว่างไคลเอนต์กับเซิร์ฟเวอร์

รับไคลเอนต์ที่มีชนิดข้อมูลครบถ้วนโดยไม่ต้องสร้างโค้ด

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

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

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

import type { AppRouter } from '../server/router';
// type-only import - erased at build time

การสร้าง client ที่ระบุประเภท

ใช้ createTRPCClient หรือรุ่นพร็อกซี โดยกำหนดพารามิเตอร์เป็น AppRouter จากนั้นออบเจ็กต์ client จะมีโครงสร้างเหมือน router ของเซิร์ฟเวอร์ พร้อมการเติมโค้ดอัตโนมัติสำหรับโพรซีเยอร์ทุกตัว

import { createTRPCClient, httpBatchLink } from '@trpc/client';

const client = createTRPCClient<AppRouter>({
  links: [httpBatchLink({ url: 'http://localhost:3000' })],
});

การเรียกใช้โพรซีเยอร์

การเรียกใช้จะสะท้อนโครงสร้างต้นไม้ของ router โพรซีเยอร์ที่ซ้อนกันอย่าง user.byId จะเข้าถึงผ่าน client.user.byId แล้วเรียกใช้ .query หรือ .mutate บนนั้น อินพุตและเอาต์พุตจะมีประเภทตามเซิร์ฟเวอร์

const user = await client.user.byId.query({ id: 1 });
// user is typed exactly as the server resolver returns

อินพุตที่อนุมานได้

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

await client.user.byId.query({ id: 1 });   // ok
// await client.user.byId.query({ id: 'x' }); // error: id must be number
// await client.user.byId.query({});          // error: id is required

เอาต์พุตที่อนุมานได้

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

const u = await client.user.byId.query({ id: 1 });
const name: string = u.name; // ok if server returns name: string

mutation บน client

เรียกใช้ mutation ด้วย .mutate การอนุมานยังทำงานเช่นเดิม อินพุตได้รับการตรวจสอบตามประเภทของสคีมา และเอาต์พุตมีประเภทตามตัวแก้ไข

const created = await client.user.create.mutate({ name: 'Bea' });
// created is typed from the create resolver's return

ลำดับการอนุมาน

ติดตามการเดินทางของประเภท: สคีมาโซดบนเซิร์ฟเวอร์จะอนุมานประเภทอินพุต ค่าที่ตัวแก้ไขส่งคืนจะอนุมานประเภทเอาต์พุต typeof appRouter จะรวบรวมทั้งสองประเภทไว้ใน AppRouter และ client จะจับคู่ประเภทนั้นกับเมธอดที่เรียกใช้ได้ การเปลี่ยนแปลงเพียงจุดเดียวจะส่งผลต่อเนื่องไปโดยอัตโนมัติ

// schema -> input type
// resolver -> output type
// appRouter -> AppRouter (both captured)
// client<AppRouter> -> typed calls

การอนุมานประเภทตัวช่วย

tRPC มีตัวช่วยสำหรับดึงประเภทอินพุตและเอาต์พุตไปใช้ซ้ำ เช่น ในส่วนประกอบของรีแอ็กต์ inferRouterInputs และ inferRouterOutputs จะมอบแผนผังเหล่านั้นจาก AppRouter

import type { inferRouterOutputs } from '@trpc/server';

type Outputs = inferRouterOutputs<AppRouter>;
type User = Outputs['user']['byId'];

การรับประกันว่าไม่คลาดเคลื่อน

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

// Server renames user.byId -> user.find
// client.user.byId becomes a type error immediately

การรวมคำขอและลิงก์

อาร์เรย์ links ใช้กำหนดค่าการส่งข้อมูล httpBatchLink จะรวมการเรียกใช้หลายรายการที่เกิดขึ้นในรอบการทำงานเดียวกันให้เป็นคำขอ HTTP เดียว เพื่อลดจำนวนการเดินทางไปกลับ นี่คือการปรับปรุงประสิทธิภาพขณะทำงานที่ไม่ส่งผลต่อประเภท

links: [httpBatchLink({ url: '/trpc' })]
// Several .query calls in one tick -> one request

การใช้งานตั้งแต่ต้นจนจบจริง

ผลลัพธ์คือ คุณเรียกใช้ client.user.byId.query(...) ได้เหมือนฟังก์ชันภายในเครื่อง พร้อมการเติมโค้ดอัตโนมัติสำหรับอินพุต อาร์กิวเมนต์ที่ตรวจสอบแล้ว และผลลัพธ์ที่มีประเภท ทั้งหมดอนุมานจากโค้ดของเซิร์ฟเวอร์โดยไม่มีไฟล์ที่สร้างขึ้นอัตโนมัติ นี่คือความปลอดภัยด้านประเภทตั้งแต่ต้นจนจบที่เกิดจากการอนุมาน

const u = await client.user.byId.query({ id: 7 });
console.log(u.name); // fully typed, no codegen

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

ทดสอบความเข้าใจการอนุมานระหว่าง client กับเซิร์ฟเวอร์

ทบทวน

คุณได้ใช้งาน API ของ tRPC ด้วยความปลอดภัยด้านประเภทอย่างครบถ้วน

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

ถัดไป: บริบทและ middleware สำหรับการยืนยันตัวตน

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

บทเรียน “การอนุมานชนิดข้อมูลระหว่างไคลเอนต์กับเซิร์ฟเวอร์” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การอนุมานชนิดข้อมูลระหว่างไคลเอนต์กับเซิร์ฟเวอร์”

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

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

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

บทเรียน “การอนุมานชนิดข้อมูลระหว่างไคลเอนต์กับเซิร์ฟเวอร์” ใช้เวลานานแค่ไหน

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

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

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

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

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

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