TypeScript Academy · Lezione

Inferenza dei tipi tra client e server

Ottenga client completamente tipizzati senza generazione di codice.

Lezione 3 di 413 passaggi

Inferenza dei tipi tra client e server è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento TypeScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso TypeScript Academy include 4 lezioni in totale.

Condividere il tipo del router

Il client ottiene la sicurezza dei tipi importando il tipo del router del server. Si tratta di un'importazione del solo tipo: nel client non viene eseguito nulla del server; oltre il confine passa solo il contratto statico.

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

Creare un client tipizzato

Usi createTRPCClient (o la variante proxy) parametrizzato con AppRouter. L'oggetto client rispecchierà quindi la struttura del router del server, con il completamento automatico per ogni procedura.

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

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

Chiamare le procedure

Le chiamate rispecchiano l'albero del router. Una procedura annidata user.byId viene raggiunta tramite client.user.byId e si chiama usando .query o .mutate. Input e output sono tipizzati in base al server.

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

Input inferiti

Il client conosce l'input di ogni procedura in base allo schema del server. Passare una struttura errata produce un errore di compilazione prima ancora di eseguire l'app.

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

Output inferiti

Anche i tipi restituiti vengono propagati. Il valore risolto da una query corrisponde esattamente a quello restituito dal resolver del server, quindi anche il codice che lo utilizza viene verificato completamente.

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

Mutation nel client

Le mutation vengono chiamate con .mutate. La stessa inferenza si applica anche in questo caso: l'input viene convalidato in base al tipo dello schema e l'output viene tipizzato in base al resolver.

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

Flusso dell'inferenza

Segua il percorso di un tipo: uno schema zod sul server inferisce il tipo di input, il valore restituito dal resolver inferisce il tipo di output, typeof appRouter raccoglie entrambi in AppRouter e il client associa quel tipo ai metodi chiamabili. Una sola modifica si propaga automaticamente ovunque.

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

Inferire i tipi ausiliari

tRPC espone helper per estrarre i tipi di input e output e riutilizzarli, ad esempio nei componenti React. inferRouterInputs e inferRouterOutputs forniscono queste mappe a partire da AppRouter.

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

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

Garanzia di assenza di divergenze

Poiché il client viene tipizzato a partire dal tipo attuale del router, server e client non possono divergere. Se rinomina una procedura o modifica un input, il client non viene compilato finché non aggiorna la chiamata. Il compilatore è il test del contratto.

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

Batching e link

L'array links configura il trasporto. httpBatchLink raggruppa in un'unica richiesta HTTP più chiamate effettuate nello stesso tick, riducendo i round trip. Si tratta di un'ottimizzazione a runtime che non influisce sui tipi.

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

End-to-end nella pratica

Il risultato è che si può chiamare client.user.byId.query(...) come una funzione locale, con completamento automatico per gli input, argomenti verificati e un risultato tipizzato, tutto derivato dal codice del server senza file generati. Questa è la sicurezza dei tipi end-to-end ottenuta tramite inferenza.

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

Verifica rapida

Verifichi la propria comprensione dell'inferenza tra client e server.

Rispondi nella lezione interattiva

Riepilogo

Ha utilizzato un'API tRPC con piena sicurezza dei tipi.

Importi AppRouter come importazione del solo tipo.
createTRPCClient<AppRouter> rispecchia l'albero del router.
Input e output vengono inferiti dagli schemi e dai resolver del server.
Client e server non possono divergere: il compilatore applica il contratto.

Prossimo argomento: contesto e middleware per l'autenticazione.

Gratis per iniziare

Impara TypeScript con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 101
Lezioni: 352

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Inferenza dei tipi tra client e server» è gratuita?

Sì — il testo completo di «Inferenza dei tipi tra client e server» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso TypeScript Academy, passa a CoddyKit PRO. Il corso TypeScript Academy include 4 lezioni in totale.

Cosa imparerò in «Inferenza dei tipi tra client e server»?

Ottenga client completamente tipizzati senza generazione di codice. Eserciti TypeScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare TypeScript Academy?

Non è richiesta alcuna esperienza precedente. TypeScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Inferenza dei tipi tra client e server»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione TypeScript Academy?

Sì. Ogni lezione TypeScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a TypeScript Academy