0Pricing
TypeScript Academy · Leçon

Présentation du client tRPC sûr du point de vue des types

Découvrez comment tRPC garantit la sûreté des types de bout en bout

Présentation du client tRPC sûr du point de vue des types est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage TypeScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours TypeScript Academy comprend 4 leçons au total.

Bienvenue

tRPC assure la sécurité des types TypeScript de bout en bout entre le serveur et le client, sans génération de code.

Qu’est-ce que tRPC

tRPC vous permet d’appeler des fonctions du serveur depuis le client avec une sécurité de typage complète. Pas de spécification OpenAPI ni de génération de code — uniquement TypeScript.

Définition du routeur serveur

Définissez des procédures typées sur le serveur à l’aide de routeurs 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)),
});

Inférence de type

Exportez le type du routeur pour l’utiliser côté client.
export type AppRouter = typeof appRouter;

Configuration du client

Créez un client tRPC typé à l’aide du type du routeur serveur.
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
const trpc = createTRPCProxyClient<AppRouter>({
  links: [httpBatchLink({ url: '/api/trpc' })],
});

Appels clients typés

Appelez les procédures du serveur depuis le client avec une autocomplétion complète.
const user = await trpc.getUser.query(1);
// user is typed as the return type of getUser

Validation des entrées avec Zod

Utilisez des schémas Zod comme validateurs des entrées tRPC.
t.procedure.input(z.object({ name: z.string(), email: z.string().email() })).mutation(...)

Mutations

Définissez des mutations pour les opérations qui modifient les données.
const router = t.router({
  createUser: t.procedure.input(CreateUserSchema).mutation(({ input }) => db.create(input)),
});

Intégration de React Query

tRPC s’intègre à React Query pour récupérer des données avec une inférence de type complète.
const { data: user } = trpc.getUser.useQuery(1);
// data is typed automatically

Gestion des erreurs dans tRPC

tRPC fournit des erreurs typées avec TRPCError.
import { TRPCError } from '@trpc/server';
if (!user) throw new TRPCError({ code: 'NOT_FOUND', message: 'User not found' });

tRPC, REST et GraphQL

tRPC convient particulièrement aux projets TypeScript full-stack. REST et GraphQL sont plus adaptés aux API publiques ou interlangages.

Vérification rapide

Comment tRPC assure-t-il la sécurité des types entre le serveur et le client ?

Récapitulatif

Vue d’ensemble d’un client tRPC sûr du point de vue des types : vous avez maîtrisé les concepts et modèles clés.

Questions Fréquemment Posées

La leçon « Présentation du client tRPC sûr du point de vue des types » est-elle gratuite ?

Oui — le texte complet de « Présentation du client tRPC sûr du point de vue des types » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours TypeScript Academy, passe à CoddyKit PRO. Le cours TypeScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Présentation du client tRPC sûr du point de vue des types » ?

Découvrez comment tRPC garantit la sûreté des types de bout en bout Tu pratiques TypeScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer TypeScript Academy ?

Aucune expérience préalable n'est requise. TypeScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Présentation du client tRPC sûr du point de vue des types » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon TypeScript Academy ?

Oui. Chaque leçon TypeScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Typer les réponses de fetch avec des enveloppes génériques
  2. Validation à l’exécution avec Zod
  3. Génération de code OpenAPI : types générés automatiquement
  4. Présentation du client tRPC sûr du point de vue des types
← Retour à TypeScript Academy