TypeScript Academy · Leçon

L’architecture tRPC

Comprendre comment tRPC élimine la duplication des schémas d’API.

L’architecture tRPC est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 1 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.

Le problème de bout en bout

Dans une application web classique, le serveur définit une API et le client l’appelle. Il est difficile de maintenir leurs types synchronisés : modifiez un champ sur le serveur et le client cesse silencieusement de fonctionner à l’exécution. tRPC résout ce problème en partageant directement les types, sans génération de code.

// Server: returns { id: number; name: string }
// Client: must know that shape exactly
// Without sync: runtime errors when they drift

Qu’est-ce que tRPC

tRPC est une bibliothèque permettant de créer des API entièrement typées en TypeScript. Le serveur définit des procédures ; le client les appelle comme s’il s’agissait de fonctions locales, avec une autocomplétion complète et une vérification des types déduites du code serveur.

// Client call looks like a local function:
// const user = await client.user.byId.query(1);
// user is typed automatically from the server

Aucune génération de code

Contrairement aux flux de travail GraphQL ou OpenAPI, tRPC ne nécessite aucune étape de génération de code. Il n’y a aucun fichier de schéma à compiler ni client généré. Les types passent du serveur au client uniquement par inférence TypeScript lors de la compilation.

// No .graphql files, no generated SDK
// Just import a type from the server package

Le routeur est le contrat

Le centre de tRPC est le routeur. Il s’agit d’une arborescence de procédures (requêtes et mutations). L’objet routeur du serveur, et plus précisément son type inféré, constitue l’unique source de vérité partagée avec le client.

// appRouter (server) defines every procedure
// type AppRouter = typeof appRouter is the contract

Comment les types sont partagés

Le serveur n’exporte que le type de son routeur, et non son implémentation. Le client importe ce type et l’utilise pour typer un client proxy. Aucun code serveur n’est envoyé au navigateur : seuls les types le sont, et ils sont supprimés lors de la compilation.

// server.ts
export type AppRouter = typeof appRouter;

// client.ts
import type { AppRouter } from '../server';

Opérations query et mutation

Les procédures se présentent sous deux formes principales. Une query lit des données et est généralement idempotente. Une mutation modifie des données. Cette distinction correspond à la mise en cache et aux sémantiques HTTP, et détermine la manière dont le client les appelle.

// client.user.list.query()      -> read
// client.user.create.mutate(...) -> write

Exécution et types

tRPC comporte deux couches. À l’exécution, les appels sont transmis en JSON via HTTP et traités par un adaptateur. À la compilation, le type partagé AppRouter vérifie entièrement chaque appel. La couche d’exécution est légère ; la valeur ajoutée réside dans la sûreté des types.

// Runtime: POST /trpc/user.byId  body: {"input":1}
// Types: client.user.byId.query(1) is checked end to end

Pourquoi l’inférence l’emporte sur la génération de code

Comme les types sont inférés, il n’y a aucune étape de synchronisation à ne pas oublier. Modifiez une procédure et le client reflète immédiatement ce changement, en affichant des soulignements rouges là où les appels ne correspondent plus. Le retour est instantané et s’affiche dans votre éditeur.

// Add a required input field on the server
// -> every client call missing it becomes a type error

Où tRPC s’intègre

tRPC excelle dans les monorepos TypeScript de bout en bout où le client et le serveur partagent une base de code, comme dans les applications Next.js. Il ne convient pas aux API publiques consommées par d’autres langages ; pour celles-ci, vous aurez toujours besoin d’un schéma indépendant du langage, tel qu’OpenAPI ou GraphQL.

// Great: Next.js app, shared types, internal API
// Not ideal: public API for non-TS consumers

Vue d’ensemble

Le flux est le suivant : définir des procédures sur un routeur, exporter le type du routeur, associer un adaptateur HTTP, puis créer un client typé à partir de ce type. Chaque appel est vérifié par rapport au contrat du serveur, sans aucun code généré. Les prochaines leçons construiront chaque élément.

// Roadmap:
// 1. initTRPC + procedures + appRouter
// 2. export AppRouter, create typed client
// 3. context + middleware for auth

Faites confiance au compilateur

Le changement de perspective est le suivant : le contrat de l’API réside dans des types contrôlés par le compilateur, et non dans la documentation ou la seule validation à l’exécution. Si le code compile, le client et le serveur sont d’accord. C’est cela que signifie la « sécurité des types de bout en bout ».

// If client.ts compiles, it matches the current server.

Vérification rapide

Testez votre compréhension de l’architecture de tRPC.

Récapitulatif

Vous avez découvert le modèle tRPC.

Le routeur est le contrat ; son type est l’unique source de vérité.
Le serveur n’exporte que le type AppRouter, et non du code.
Les query lisent les données, les mutation les écrivent ; l’exécution repose sur JSON via HTTP.
La sûreté des types vient de l’inférence, sans étape de génération de code.

Ensuite : définir des routeurs et des procédures.

Questions Fréquemment Posées

La leçon « L’architecture tRPC » est-elle gratuite ?

Oui — le texte complet de « L’architecture tRPC » 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 « L’architecture tRPC » ?

Comprendre comment tRPC élimine la duplication des schémas d’API. 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 1 sur 4.

Combien de temps prend la leçon « L’architecture tRPC » ?

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

← Retour à TypeScript Academy