TypeScript Academy · Pelajaran

Inferensi Jenis Klien-Server

Dapatkan klien bertipe lengkap tanpa pembuatan kode.

Inferensi Jenis Klien-Server adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

Berbagi Tipe Perute

client mendapatkan keamanan tipe dengan mengimpor tipe perute peladen. Ini adalah impor khusus tipe: tidak ada yang dijalankan dari peladen di client; hanya kontrak statis yang melewati batas.

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

Membuat Client Bertipe

Gunakan createTRPCClient (atau varian proksinya) dengan parameter AppRouter. Objek client kemudian mencerminkan bentuk perute peladen, dengan pelengkapan otomatis penuh untuk setiap prosedur.

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

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

Memanggil Prosedur

Panggilan mencerminkan hierarki perute. Prosedur bertingkat user.byId diakses sebagai client.user.byId, lalu Anda memanggil .query atau .mutate pada prosedur tersebut. Masukan dan keluaran bertipe berdasarkan peladen.

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

Masukan Hasil Inferensi

client mengetahui masukan setiap prosedur dari skema peladen. Meneruskan bentuk yang salah menjadi kesalahan kompilasi sebelum Anda menjalankan aplikasi.

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

Keluaran Hasil Inferensi

Tipe kembalian juga mengalir kembali. Nilai hasil kueri persis sama dengan yang dikembalikan penyelesai peladen, sehingga kode lanjutan diperiksa sepenuhnya.

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

Mutasi pada Client

Mutasi dipanggil dengan .mutate. Inferensi yang sama berlaku: masukan divalidasi oleh tipe skema, dan keluaran diberi tipe dari penyelesai.

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

Alur Inferensi

Telusuri perjalanan sebuah tipe: skema zod di peladen menginferensikan tipe masukan, nilai kembalian penyelesai menginferensikan tipe keluaran, typeof appRouter menangkap keduanya ke dalam AppRouter, lalu client memetakan tipe tersebut ke metode yang dapat dipanggil. Satu perubahan menyebar secara otomatis.

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

Menginferensikan Tipe Pembantu

tRPC menyediakan pembantu untuk mengekstrak tipe masukan dan keluaran agar dapat digunakan kembali, misalnya dalam komponen React. inferRouterInputs dan inferRouterOutputs memberi Anda pemetaan tersebut dari AppRouter.

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

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

Jaminan Tanpa Penyimpangan

Karena client diberi tipe dari tipe perute yang aktif, peladen dan client tidak dapat menyimpang. Ganti nama prosedur atau ubah masukan, dan client gagal dikompilasi sampai Anda memperbarui panggilannya. Kompiler adalah pengujian kontrak Anda.

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

Pengelompokan dan Tautan

Array links mengatur transportasi. httpBatchLink mengelompokkan beberapa panggilan yang dibuat dalam giliran eksekusi yang sama menjadi satu permintaan HTTP, sehingga mengurangi perjalanan bolak-balik. Ini adalah pengoptimalan waktu proses yang tidak memengaruhi tipe.

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

Ujung ke Ujung dalam Praktik

Hasilnya: Anda memanggil client.user.byId.query(...) seperti fungsi lokal, dengan pelengkapan otomatis pada masukan, argumen yang diperiksa, dan hasil bertipe, semuanya diturunkan dari kode peladen tanpa berkas yang dibuat secara otomatis. Itulah keamanan tipe ujung ke ujung yang diberikan oleh inferensi.

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

Uji Cepat

Uji pemahaman Anda tentang inferensi antara client dan peladen.

Rangkuman

Anda telah menggunakan API tRPC dengan keamanan tipe penuh.

Impor AppRouter sebagai impor khusus tipe.
createTRPCClient<AppRouter> mencerminkan hierarki perute.
Masukan dan keluaran diinferensikan dari skema serta penyelesai di peladen.
Client dan peladen tidak dapat menyimpang; kompiler menegakkan kontrak.

Berikutnya: konteks dan middleware untuk autentikasi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Inferensi Jenis Klien-Server” gratis?

Ya — teks lengkap “Inferensi Jenis Klien-Server” 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 “Inferensi Jenis Klien-Server”?

Dapatkan klien bertipe lengkap tanpa pembuatan kode. 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 3 dari 4.

Berapa lama pelajaran “Inferensi Jenis Klien-Server” 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.

Semua pelajaran dalam kursus ini

← Kembali ke TypeScript Academy