Arsitektur tRPC
Pahami cara tRPC menghilangkan duplikasi skema API.
Arsitektur tRPC adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar TypeScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus TypeScript Academy mencakup 4 pelajaran total.
Masalah Ujung ke Ujung
Dalam aplikasi web biasa, peladen mendefinisikan API dan klien memanggilnya. Menjaga agar tipe keduanya tetap sinkron sulit dilakukan: ubah suatu bidang di peladen, lalu klien dapat rusak diam-diam saat dijalankan. tRPC mengatasi hal ini dengan membagikan tipe secara langsung, tanpa pembuatan kode.
// Server: returns { id: number; name: string }
// Client: must know that shape exactly
// Without sync: runtime errors when they driftApa Itu tRPC
tRPC adalah pustaka untuk membangun API bertipe penuh dalam TypeScript. Peladen mendefinisikan prosedur; klien memanggilnya seolah-olah prosedur tersebut adalah fungsi lokal, dengan pelengkapan otomatis dan pemeriksaan tipe lengkap yang disimpulkan dari kode peladen.
// Client call looks like a local function:
// const user = await client.user.byId.query(1);
// user is typed automatically from the serverTanpa Pembuatan Kode
Berbeda dari alur kerja GraphQL atau OpenAPI, tRPC tidak memerlukan langkah pembuatan kode. Tidak ada berkas skema yang perlu dikompilasi dan tidak ada klien yang dihasilkan. Tipe mengalir dari peladen ke klien sepenuhnya melalui inferensi TypeScript pada waktu kompilasi.
// No .graphql files, no generated SDK
// Just import a type from the server packagePerute adalah Kontrak
Pusat tRPC adalah perute. Perute merupakan pohon prosedur, yaitu query dan mutasi. Objek perute di peladen, khususnya tipe yang disimpulkan darinya, adalah satu-satunya sumber kebenaran yang dibagikan kepada klien.
// appRouter (server) defines every procedure
// type AppRouter = typeof appRouter is the contractCara Berbagi Tipe
Peladen hanya mengekspor tipe perutenya, bukan implementasinya. client mengimpor tipe tersebut dan menggunakannya untuk memberi tipe pada client proksi. Tidak ada kode peladen yang dikirim ke peramban; hanya tipe yang dihapus saat pembuatan.
// server.ts
export type AppRouter = typeof appRouter;
// client.ts
import type { AppRouter } from '../server';Kueri dan Mutasi
Prosedur memiliki dua jenis utama. query membaca data dan biasanya bersifat idempoten. mutation mengubah data. Perbedaan ini berkaitan dengan penyinggahan dan semantik HTTP, serta menentukan cara client memanggilnya.
// client.user.list.query() -> read
// client.user.create.mutate(...) -> writeWaktu Proses dibandingkan dengan Tipe
tRPC memiliki dua lapisan. Saat waktu proses, panggilan berupa JSON melalui HTTP dan ditangani oleh adaptor. Saat waktu kompilasi, tipe bersama AppRouter membuat setiap panggilan diperiksa sepenuhnya. Lapisan waktu prosesnya ringan; keamanan tipe adalah nilai utamanya.
// Runtime: POST /trpc/user.byId body: {"input":1}
// Types: client.user.byId.query(1) is checked end to endMengapa Inferensi Mengungguli Pembuatan Kode
Karena tipe diinferensikan, Anda tidak perlu mengingat langkah sinkronisasi. Edit sebuah prosedur, dan client segera mencerminkan perubahan itu dengan garis berlekuk merah di tempat panggilan tidak lagi cocok. Umpan baliknya langsung terlihat di penyunting Anda.
// Add a required input field on the server
// -> every client call missing it becomes a type errorKapan tRPC Cocok Digunakan
tRPC sangat cocok untuk monorepo TypeScript dengan tumpukan penuh, ketika client dan peladen berbagi basis kode, seperti pada aplikasi Next.js. tRPC bukan untuk API publik yang digunakan oleh bahasa lain; untuk itu, Anda tetap memerlukan skema yang tidak bergantung pada bahasa, seperti OpenAPI atau GraphQL.
// Great: Next.js app, shared types, internal API
// Not ideal: public API for non-TS consumersGambaran Besar
Alurnya adalah: tentukan prosedur pada sebuah perute, ekspor tipe perute tersebut, pasang adaptor HTTP, lalu buat client bertipe dari tipe itu. Setiap panggilan diperiksa berdasarkan kontrak peladen tanpa kode yang dibuat secara otomatis. Pelajaran berikutnya membangun setiap bagian tersebut.
// Roadmap:
// 1. initTRPC + procedures + appRouter
// 2. export AppRouter, create typed client
// 3. context + middleware for authPercayakan pada Kompiler
Perubahan pola pikirnya adalah: kontrak API berada dalam tipe yang ditegakkan oleh kompiler, bukan hanya dalam dokumentasi atau validasi saat waktu proses. Jika berhasil dikompilasi, client dan peladen telah sepakat. Jaminan itulah yang dimaksud dengan "keamanan tipe ujung ke ujung".
// If client.ts compiles, it matches the current server.Uji Cepat
Uji pemahaman Anda tentang arsitektur tRPC.
Rangkuman
Anda telah mempelajari model tRPC.
- Perute adalah kontraknya; tipenya merupakan satu-satunya sumber kebenaran.
- Peladen hanya mengekspor tipe
AppRouter, bukan kode. - Kueri membaca, mutasi menulis; waktu proses menggunakan JSON melalui HTTP.
- Keamanan tipe berasal dari inferensi, tanpa langkah pembuatan kode.
Berikutnya: mendefinisikan perute dan prosedur.
Belajar TypeScript dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 101
- Pelajaran
- 352
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Arsitektur tRPC” gratis?
Ya — teks lengkap “Arsitektur tRPC” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus TypeScript Academy, upgrade ke CoddyKit PRO. Kursus TypeScript Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Arsitektur tRPC”?
Pahami cara tRPC menghilangkan duplikasi skema API. Kamu berlatih TypeScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai TypeScript Academy?
Tidak diperlukan pengalaman sebelumnya. TypeScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Arsitektur tRPC” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran TypeScript Academy ini?
Ya. Setiap pelajaran TypeScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.