İstemci-Sunucu Tür Çıkarımı
Kod üretimi olmadan türleri tamamen belirlenmiş istemciler elde edin.
İstemci-Sunucu Tür Çıkarımı, CoddyKit'te ücretsiz bir TypeScript Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, TypeScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. TypeScript Academy kursu toplamda 4 dersten oluşur.
Yönlendirici Türünü Paylaşma
İstemci, sunucu yönlendiricisinin türünü içe aktararak tür güvenliği kazanır. Bu, yalnızca tür içe aktarmasıdır: sunucudan hiçbir şey istemcide çalışmaz; sınırı yalnızca statik sözleşme geçer.
import type { AppRouter } from '../server/router';
// type-only import - erased at build timeTürü Belirlenmiş İstemci Oluşturma
AppRouter tür parametresi verilmiş createTRPCClient işlevini veya vekil sürümünü kullanın. Böylece istemci nesnesi, her prosedür için tam otomatik tamamlama sağlayarak sunucu yönlendiricisinin yapısını yansıtır.
import { createTRPCClient, httpBatchLink } from '@trpc/client';
const client = createTRPCClient<AppRouter>({
links: [httpBatchLink({ url: 'http://localhost:3000' })],
});Prosedürleri Çağırma
Çağrılar yönlendirici ağacını yansıtır. İç içe bir prosedüre user.byId, client.user.byId olarak erişilir ve üzerinde .query veya .mutate çağrılır. Girdiler ve çıktılar sunucudan gelen türlere göre belirlenir.
const user = await client.user.byId.query({ id: 1 });
// user is typed exactly as the server resolver returnsÇıkarılan Girdiler
İstemci, her prosedürün girdisini sunucu şemasından bilir. Yanlış yapıda bir değer geçirmeniz, uygulamayı hiç çalıştırmadan önce derleme hatasına yol açar.
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Çıkarılan Çıktılar
Dönüş türleri de aktarılır. Bir sorgunun çözümlenmiş değeri, sunucu çözümleyicisinin döndürdüğü değerin aynısıdır; bu nedenle sonraki kod da bütünüyle denetlenir.
const u = await client.user.byId.query({ id: 1 });
const name: string = u.name; // ok if server returns name: stringİstemcideki Mutasyonlar
Mutasyonlar .mutate ile çağrılır. Aynı tür çıkarımı burada da geçerlidir: girdi şema tarafından doğrulanır, çıktı ise çözümleyiciden gelen türe göre belirlenir.
const created = await client.user.create.mutate({ name: 'Bea' });
// created is typed from the create resolver's returnTür Çıkarımı Akışı
Bir türün nasıl ilerlediğini izleyin: sunucudaki bir zod şeması girdi türünü çıkarır, çözümleyicinin dönüşü çıktı türünü çıkarır, typeof appRouter her ikisini AppRouter içine alır ve istemci bu türü çağrılabilir yöntemlere eşler. Tek bir değişiklik otomatik olarak her yere yayılır.
// schema -> input type
// resolver -> output type
// appRouter -> AppRouter (both captured)
// client<AppRouter> -> typed callsYardımcı Türleri Çıkarma
tRPC, örneğin React bileşenlerinde yeniden kullanmak üzere girdi ve çıktı türlerini ayıklayan yardımcılar sunar. inferRouterInputs ve inferRouterOutputs, bu eşlemeleri AppRouter üzerinden sağlar.
import type { inferRouterOutputs } from '@trpc/server';
type Outputs = inferRouterOutputs<AppRouter>;
type User = Outputs['user']['byId'];Sapma Olmaması Garantisi
İstemci güncel yönlendirici türüne göre belirlendiği için sunucu ve istemci birbirinden sapamaz. Bir prosedürü yeniden adlandırır veya bir girdiyi değiştirirseniz istemci, çağrıyı güncelleyene kadar derlenemez. Derleyici sözleşmenizi sınar.
// Server renames user.byId -> user.find
// client.user.byId becomes a type error immediatelyToplu İstekler ve Bağlantılar
links dizisi aktarımı yapılandırır. httpBatchLink, aynı işlem turunda yapılan birden çok çağrıyı tek bir HTTP isteğinde birleştirerek gidiş-dönüşleri azaltır. Bu, türleri etkilemeyen bir çalışma zamanı iyileştirmesidir.
links: [httpBatchLink({ url: '/trpc' })]
// Several .query calls in one tick -> one requestUçtan Uca Uygulama
Sonuç şudur: client.user.byId.query(...) çağrısını yerel bir işlev gibi yaparsınız; girdiler için otomatik tamamlama, denetlenmiş bağımsız değişkenler ve türü belirlenmiş bir sonuç elde edersiniz. Bunların tümü, hiç dosya üretilmeden sunucu kodundan türetilir. İşte tür çıkarımıyla sağlanan uçtan uca tür güvenliği budur.
const u = await client.user.byId.query({ id: 7 });
console.log(u.name); // fully typed, no codegenKısa Değerlendirme
İstemci-sunucu tür çıkarımı hakkındaki anlayışınızı sınayın.
Özet
Tam tür güvenliğiyle bir tRPC API'sini kullandınız.
AppRoutertürünü yalnızca tür içe aktarması olarak içe aktarın.createTRPCClient<AppRouter>, yönlendirici ağacını yansıtır.- Girdiler ve çıktılar sunucu şemaları ile çözümleyicilerinden çıkarılır.
- İstemci ve sunucu birbirinden sapamaz; derleyici sözleşmeyi uygular.
Sıradaki konu: kimlik doğrulama için bağlam ve ara katman.
Sıkça Sorulan Sorular
“İstemci-Sunucu Tür Çıkarımı” dersi ücretsiz mi?
Evet — “İstemci-Sunucu Tür Çıkarımı” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve TypeScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. TypeScript Academy kursu toplamda 4 dersten oluşur.
“İstemci-Sunucu Tür Çıkarımı” dersinde ne öğreneceğim?
Kod üretimi olmadan türleri tamamen belirlenmiş istemciler elde edin. TypeScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
TypeScript Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te TypeScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“İstemci-Sunucu Tür Çıkarımı” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu TypeScript Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her TypeScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- tRPC Mimarisi
- Yönlendiricileri ve Prosedürleri Tanımlama
- İstemci-Sunucu Tür Çıkarımı
- Ara Katman ve Bağlam