TypeScript Academy · Lezione

Panoramica del client tRPC type-safe

Scopra come tRPC garantisce la sicurezza dei tipi end-to-end.

Lezione 4 di 413 passaggi

Panoramica del client tRPC type-safe è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 4 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.

Benvenuto

tRPC abilita la sicurezza dei tipi TypeScript end-to-end tra server e client senza generazione di codice.

Che cos'è tRPC

tRPC consente di chiamare le funzioni del server dal client con piena sicurezza dei tipi. Nessuna specifica OpenAPI e nessun codegen: solo TypeScript.

Definizione del router server

Definisca procedure tipizzate sul server utilizzando i router tRPC.
import { initTRPC } from '@trpc/server';
const t = initTRPC.create();
const appRouter = t.router({
  getUser: t.procedure.input(z.number()).query(({ input }) => db.getUser(input)),
});

Inferenza dei tipi

Esporti il tipo del router per utilizzarlo sul client.
export type AppRouter = typeof appRouter;

Configurazione del client

Crei un client tRPC tipizzato utilizzando il tipo del router server.
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
const trpc = createTRPCProxyClient<AppRouter>({
  links: [httpBatchLink({ url: '/api/trpc' })],
});

Chiamate tipizzate del client

Chiami le procedure del server dal client con il completamento automatico completo.
const user = await trpc.getUser.query(1);
// user is typed as the return type of getUser

Validazione degli input con Zod

Utilizzi gli schemi Zod come validatori degli input di tRPC.
t.procedure.input(z.object({ name: z.string(), email: z.string().email() })).mutation(...)

Mutation

Definisca mutation per le operazioni che modificano i dati.
const router = t.router({
  createUser: t.procedure.input(CreateUserSchema).mutation(({ input }) => db.create(input)),
});

Integrazione con React Query

tRPC si integra con React Query per il recupero dei dati con inferenza completa dei tipi.
const { data: user } = trpc.getUser.useQuery(1);
// data is typed automatically

Gestione degli errori in tRPC

tRPC fornisce errori tipizzati tramite TRPCError.
import { TRPCError } from '@trpc/server';
if (!user) throw new TRPCError({ code: 'NOT_FOUND', message: 'User not found' });

tRPC, REST e GraphQL a confronto

tRPC è ideale per i progetti TypeScript full-stack. REST e GraphQL sono più adatti alle API pubbliche o utilizzate da più linguaggi.

Verifica rapida

Come ottiene tRPC la sicurezza dei tipi tra server e client?

Riepilogo

Panoramica del client tRPC type-safe: ha acquisito i concetti e i pattern chiave.
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

Domande Frequenti

La lezione «Panoramica del client tRPC type-safe» è gratuita?

Sì — il testo completo di «Panoramica del client tRPC type-safe» è 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 «Panoramica del client tRPC type-safe»?

Scopra come tRPC garantisce la sicurezza dei tipi end-to-end. 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 4 di 4.

Quanto tempo richiede la lezione «Panoramica del client tRPC type-safe»?

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

  1. Tipizzazione delle risposte di fetch con wrapper generici
  2. Validazione a runtime con Zod
  3. Codegen OpenAPI: tipi generati automaticamente
  4. Panoramica del client tRPC type-safe
← Torna a TypeScript Academy