TypeScript Academy · บทเรียน

การกำหนดเราเตอร์และโพรซีเยอร์

สร้างการสืบค้นและการกลายข้อมูลพร้อมการตรวจสอบ input

บทเรียน 2 จาก 413 ขั้นตอน

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

การเริ่มต้นใช้งาน tRPC

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

import { initTRPC } from '@trpc/server';

const t = initTRPC.create();
export const router = t.router;
export const publicProcedure = t.procedure;

โพรซีเยอร์แรก

โพรซีเยอร์คือจุดปลายทางของ API หนึ่งจุด โพรซีเยอร์ที่ง่ายที่สุดคือ query ที่ส่งคืนค่า publicProcedure.query ใช้กำหนดจุดปลายทางสำหรับอ่านข้อมูลโดยไม่มีอินพุต

import { router, publicProcedure } from './trpc';

const appRouter = router({
  health: publicProcedure.query(() => 'ok'),
});

การตรวจสอบอินพุต

โพรซีเยอร์จะประกาศอินพุตของตนด้วยตัวตรวจสอบ โดยทั่วไปคือสคีมาของไลบรารีโซด .input(schema) ทำทั้งการตรวจสอบขณะทำงานและการอนุมานประเภทอินพุตสำหรับตัวแก้ไขและ client

import { z } from 'zod';

const greet = publicProcedure
  .input(z.object({ name: z.string() }))
  .query(({ input }) => 'Hello, ' + input.name);

การอ่านอินพุต

ภายในตัวแก้ไข อินพุตที่ผ่านการตรวจสอบแล้วจะพร้อมใช้งานในชื่อ input และมีประเภทครบถ้วนจากสคีมา ไม่ต้องแปลงประเภทด้วยตนเอง เพราะโซดและ tRPC จะอนุมานโครงสร้างร่วมกัน

const byId = publicProcedure
  .input(z.object({ id: z.number() }))
  .query(({ input }) => {
    // input.id is number
    return { id: input.id, name: 'Alice' };
  });

คำสั่ง mutation

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

const createUser = publicProcedure
  .input(z.object({ name: z.string() }))
  .mutation(({ input }) => {
    return { id: 1, name: input.name };
  });

การสร้าง router ของแอป

รวบรวมโพรซีเยอร์ไว้ใน router โดยส่งออบเจ็กต์ให้กับ router(...) คีย์แต่ละรายการจะกลายเป็นชื่อโพรซีเยอร์ที่เรียกใช้ได้ appRouter นี้คือ API ทั้งหมดของคุณ

const appRouter = router({
  greet,
  byId,
  createUser,
});

router ซ้อนกัน

router สามารถซ้อนกันเพื่อจัดระเบียบ API ขนาดใหญ่ ค่าในออบเจ็กต์ของ router อาจเป็น router อีกตัวหนึ่ง ทำให้เกิดการเรียกใช้แบบมีเนมสเปซ เช่น user.byId

const userRouter = router({ byId, createUser });

const appRouter = router({
  user: userRouter,
  greet,
});
// call paths: user.byId, user.createUser, greet

การส่งออกประเภทของ router

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

export const appRouter = router({ user: userRouter });
export type AppRouter = typeof appRouter;

การเชื่อมต่ออะแดปเตอร์

หากต้องการให้บริการ router ผ่าน HTTP ให้เชื่อมต่ออะแดปเตอร์ tRPC มีอะแดปเตอร์สำหรับโนดแบบทำงานเดี่ยว เอ็กซ์เพรส Next.js เฟตช์ และอื่น ๆ อะแดปเตอร์จะแปลงคำขอที่เข้ามาให้เป็นการเรียกใช้โพรซีเยอร์

import { createHTTPServer } from '@trpc/server/adapters/standalone';

createHTTPServer({ router: appRouter }).listen(3000);

การจัดระเบียบไฟล์

โครงสร้างที่พบได้ทั่วไปคือ มี trpc.ts ซึ่งประกอบด้วย initTRPC และ router/publicProcedure ที่ส่งออก มี router ของแต่ละฟีเจอร์อยู่ในไฟล์ของตนเอง และมี appRouter ระดับรากที่นำมาประกอบกัน การเก็บ initTRPC ไว้ในที่เดียวช่วยหลีกเลี่ยงการมีหลายอินสแตนซ์

// trpc.ts: initTRPC.create(), export router + publicProcedure
// routers/user.ts: userRouter
// router.ts: appRouter = router({ user: userRouter })

ทบทวนการอนุมานอินพุต

เนื่องจาก .input(schema) ทำทั้งการตรวจสอบและการอนุมาน คุณจึงเขียนสคีมาเพียงครั้งเดียวและได้ทั้งตัวป้องกันขณะทำงานกับประเภทแบบสถิต client จะเห็นอินพุตที่โพรซีเยอร์แต่ละตัวต้องการอย่างถูกต้อง โดยอนุมานมาจากสคีมาเหล่านี้

const search = publicProcedure
  .input(z.object({ q: z.string(), page: z.number().optional() }))
  .query(({ input }) => ({ q: input.q, page: input.page ?? 1 }));

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

ทดสอบความเข้าใจ router และโพรซีเยอร์

ตอบคำถามในบทเรียนแบบโต้ตอบ

ทบทวน

คุณได้สร้างแบ็กเอนด์ tRPC

initTRPC.create() ส่งคืนตัวสร้าง router และ procedure
.input(schema) ตรวจสอบและอนุมานอินพุต
.query ใช้อ่านข้อมูล ส่วน .mutation ใช้เขียนข้อมูล
นำโพรซีเยอร์มาประกอบเป็น appRouter และส่งออก type AppRouter = typeof appRouter

ถัดไป: การใช้งานด้วย client ที่มีประเภทครบถ้วน

เริ่มต้นได้ฟรี

เรียนรู้ TypeScript ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 101
บทเรียน: 352

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

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

บทเรียน “การกำหนดเราเตอร์และโพรซีเยอร์” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การกำหนดเราเตอร์และโพรซีเยอร์”

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

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

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

บทเรียน “การกำหนดเราเตอร์และโพรซีเยอร์” ใช้เวลานานแค่ไหน

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

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

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

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

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

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