0Pricing
TypeScript Academy · Leçon

Inférence des types client-serveur

Obtenir des clients entièrement typés sans génération de code.

Inférence des types client-serveur est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.

Partager le type du routeur

Le client gagne en sûreté des types en important le type du routeur du serveur. Il s’agit d’une importation de type uniquement : rien provenant du serveur ne s’exécute dans le client ; seul le contrat statique franchit la frontière.

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

Créer un client typé

Utilisez createTRPCClient (ou la variante proxy) en le paramétrant avec AppRouter. L’objet client reproduit alors la structure du routeur du serveur, avec une autocomplétion complète pour chaque procédure.

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

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

Appeler les procédures

Les appels reproduisent l’arborescence du routeur. Une procédure imbriquée user.byId est accessible via client.user.byId, puis vous appelez .query ou .mutate dessus. Les entrées et les sorties sont typées à partir du serveur.

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

Entrées inférées

Le client connaît l’entrée de chaque procédure grâce au schéma du serveur. Si vous transmettez une structure incorrecte, une erreur de compilation survient avant même l’exécution de l’application.

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

Sorties inférées

Les types de retour sont également propagés. La valeur résolue d’une query correspond exactement à ce que renvoie le résolveur du serveur ; le code qui l’utilise en aval est donc entièrement vérifié.

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

Opérations mutation côté client

Les mutation sont appelées avec .mutate. La même inférence s’applique : l’entrée est validée par le type du schéma et la sortie est typée à partir du résolveur.

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

Le flux d’inférence

Suivez le parcours d’un type : un schéma zod sur le serveur infère le type d’entrée, le type de retour du résolveur infère le type de sortie, typeof appRouter regroupe les deux dans AppRouter, puis le client associe ce type à des méthodes appelables. Une seule modification se propage automatiquement partout.

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

Inférer des types utilitaires

tRPC expose des utilitaires permettant d’extraire les types d’entrée et de sortie pour les réutiliser, par exemple dans des composants React. inferRouterInputs et inferRouterOutputs vous fournissent ces correspondances à partir de AppRouter.

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

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

Garantie d’absence de divergence

Comme le client est typé à partir du type actif du routeur, le serveur et le client ne peuvent pas diverger. Renommez une procédure ou modifiez une entrée, et le client ne compilera plus tant que vous n’aurez pas mis à jour l’appel. Le compilateur est votre test du contrat.

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

Regroupement et liens

Le tableau links configure le transport. httpBatchLink regroupe plusieurs appels effectués au cours du même cycle d’exécution en une seule requête HTTP, ce qui réduit les allers-retours. Il s’agit d’une optimisation à l’exécution qui n’affecte pas les types.

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

De bout en bout en pratique

Le résultat : vous appelez client.user.byId.query(...) comme une fonction locale, avec l’autocomplétion des entrées, des arguments vérifiés et un résultat typé, le tout dérivé du code serveur sans aucun fichier généré. Voilà la sécurité des types de bout en bout obtenue par inférence.

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

Vérification rapide

Testez votre compréhension de l’inférence entre le client et le serveur.

Récapitulatif

Vous avez utilisé une API tRPC avec une sûreté complète des types.

  • Importez AppRouter comme type uniquement.
  • createTRPCClient<AppRouter> reproduit l’arborescence du routeur.
  • Les entrées et les sorties sont inférées à partir des schémas et des résolveurs du serveur.
  • Le client et le serveur ne peuvent pas diverger ; le compilateur impose le contrat.

Ensuite : le contexte et le middleware pour l’authentification.

Questions Fréquemment Posées

La leçon « Inférence des types client-serveur » est-elle gratuite ?

Oui — le texte complet de « Inférence des types client-serveur » 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 « Inférence des types client-serveur » ?

Obtenir des clients entièrement typés sans génération de code. 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 3 sur 4.

Combien de temps prend la leçon « Inférence des types client-serveur » ?

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. L’architecture tRPC
  2. Définir des routeurs et des procédures
  3. Inférence des types client-serveur
  4. Intergiciel et contexte
← Retour à TypeScript Academy