0Pricing
Sveltejs Academy · บทเรียน

ความปลอดภัยของชนิดข้อมูลครบวงจรด้วย tRPC

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

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

tRPC คืออะไร

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

ติดตั้ง

เพิ่ม tRPC และอะแดปเตอร์ SvelteKit

npm install @trpc/server @trpc/client trpc-sveltekit

กำหนดเราเตอร์

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

export const appRouter = router({
  users: router({
    list: publicProcedure.query(() => db.select().from(users))
  })
});

ตัวจัดการ SvelteKit

เชื่อมเราเตอร์ไว้ที่ /trpc/[...path]/+server.js

ตั้งค่าไคลเอ็นต์

สร้างไคลเอ็นต์ tRPC ที่มีชนิดข้อมูลกำกับ โดยอนุมานชนิดข้อมูลจากเราเตอร์

export const trpc = createTRPCSvelteClient<AppRouter>();

การเรียกใช้ที่ปลอดภัยด้านชนิดข้อมูล

ไคลเอ็นต์จะแนะนำโพรซีเยอร์โดยอัตโนมัติ และอนุมานชนิดข้อมูลของอาร์กิวเมนต์และค่าที่ส่งคืน

const users = await trpc.users.list.query();

การตรวจสอบข้อมูล

ใช้ร่วมกับสคีมา Zod เพื่อรวมการตรวจสอบข้อมูลนำเข้าและชนิดข้อมูลไว้ในที่เดียว

การกลายค่า

ใช้ publicProcedure.input(z.object({...})).mutation() สำหรับการกลายค่าที่มีชนิดข้อมูลกำกับ

มิดเดิลแวร์

เพิ่มมิดเดิลแวร์ของ tRPC สำหรับการยืนยันตัวตน การบันทึกเหตุการณ์ หรือการจำกัดอัตรา ก่อนที่โพรซีเยอร์จะทำงาน

เหมาะกับ SSR

tRPC ทำงานร่วมกับ SSR ของ SvelteKit ผ่านอะแดปเตอร์ trpc-sveltekit

เปรียบเทียบกับ REST/GraphQL

tRPC ตัดชั้นสคีมาออก โดยให้ไคลเอ็นต์และเซิร์ฟเวอร์ใช้ชนิดข้อมูล TypeScript ร่วมกันโดยตรง

ตรวจสอบอย่างรวดเร็ว

ประโยชน์หลักของ tRPC คืออะไร

สรุป

tRPC มอบการเรียกใช้ API ที่ปลอดภัยด้านชนิดข้อมูลตั้งแต่ต้นทางถึงปลายทางใน SvelteKit ทำให้ไม่จำเป็นต้องใช้สคีมา OpenAPI หรือ GraphQL

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

บทเรียน “ความปลอดภัยของชนิดข้อมูลครบวงจรด้วย tRPC” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ความปลอดภัยของชนิดข้อมูลครบวงจรด้วย tRPC”

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

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

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

บทเรียน “ความปลอดภัยของชนิดข้อมูลครบวงจรด้วย tRPC” ใช้เวลานานแค่ไหน

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

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

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

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

  1. การยืนยันตัวตน + ฐานข้อมูล + API: สถาปัตยกรรม
  2. Drizzle ORM ร่วมกับ SvelteKit
  3. การนำไปใช้งานบน Vercel พร้อมฐานข้อมูล
  4. ความปลอดภัยของชนิดข้อมูลครบวงจรด้วย tRPC
← กลับไปที่ Sveltejs Academy