0Pricing
TypeScript Academy · Leçon

Mini-analyseur de routes au niveau des types

Analyser des chemins de routes en objets de paramètres typés.

Mini-analyseur de routes au niveau 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.

L’objectif

Nous construisons un analyseur de routes qui lit un chemin comme "users/:id/posts/:postId" et produit un objet de paramètres typé { id: string; postId: string }, entièrement à la compilation. Il s’agit d’un véritable modèle utilisé par les routeurs typés.

type Params = ParseRoute<"users/:id/posts/:postId">;
// Goal: { id: string; postId: string }

Reconnaître un paramètre

Un segment de chemin est un paramètre lorsqu’il commence par ":". Nous faisons correspondre ce préfixe avec un littéral de modèle et inférons le nom du paramètre qui suit les deux-points.

Notation : en TypeScript réel, les types littéraux de modèle s’écrivent avec des chaînes délimitées par des accents graves contenant des emplacements dollar-accolade. Dans ces extraits, nous représentons ce motif sous la forme Tpl<...>, en indiquant chaque partie dans l’ordre ; par exemple, un modèle avec accent grave correspondant au préfixe littéral puis à Rest apparaît sous la forme Tpl<'prefix', infer Rest>.

type ParamName<S> = S extends Tpl<':', infer Name> ? Name : never;
// Tpl<...> denotes a backtick template literal type: a colon then Name

type X = ParamName<':id'>;   // 'id'
type Y = ParamName<'users'>; // never

Découper le chemin

Commencez par découper la route en segments sur "/", en réutilisant le type Split. Chaque segment est ensuite soit un littéral, soit un paramètre.

type Split<S extends string, Sep extends string> =
  S extends Tpl<infer H, Sep, infer T> ? [H, ...Split<T, Sep>] : [S];
// Tpl<H, Sep, T> = a template literal type matching H, then Sep, then T

type Segs = Split<'users/:id', '/'>; // ['users', ':id']

Récursion directe sur le modèle

Nous pouvons également analyser la chaîne brute sans la découper d’abord, en faisant correspondre un segment à la fois. Faites correspondre le texte jusqu’au prochain "/", traitez ce segment, puis recommencez sur le reste.

type ParseRoute<S extends string> =
  S extends Tpl<infer Seg, '/', infer Rest>
    ? SegParam<Seg> & ParseRoute<Rest>
    : SegParam<S>;
// Tpl<Seg, '/', Rest> matches a segment, a slash, then the rest

Paramètre de chaque segment

L’utilitaire transforme un segment unique en un objet à une propriété (s’il s’agit d’un paramètre) ou en un objet vide (s’il s’agit d’un littéral).

type SegParam<S extends string> =
  S extends Tpl<':', infer Name> ? { [K in Name]: string } : {};
// Tpl<':', Name> matches a colon followed by the param name

type X = SegParam<':id'>;   // { id: string }
type Y = SegParam<'posts'>; // {}

Combiner avec une intersection

Chaque segment apporte ses paramètres par intersection. Les objets vides disparaissent dans une intersection ; seuls les paramètres réels restent donc dans le type final.

type Params = ParseRoute<"users/:id/posts/:postId">;
// { id: string } & {} & { postId: string } & {}
// = { id: string; postId: string }

Suivre l’analyse

Pour "users/:id/posts/:postId" :

  • Segment « users » -> {} , récursion sur « :id/posts/:postId »
  • Segment « :id » -> { id: string }, récursion sur « posts/:postId »
  • Segment « posts » -> {}, récursion sur « :postId »
  • Segment « :postId » -> { postId: string }, cas de base
type Final = { id: string } & { postId: string };

Nettoyer le résultat

L’intersection d’objets s’affiche de manière peu lisible. Un utilitaire de « mise en forme » l’aplatit en un objet unique et propre à l’aide d’un type mappé sur ses clés.

type Prettify<T> = { [K in keyof T]: T[K] } & {};

type Clean = Prettify<ParseRoute<"users/:id">>; // { id: string }

Utiliser l’analyseur

Injectez le type analysé dans une fonction afin que le gestionnaire reçoive des paramètres correctement typés. Le passage d’une clé incorrecte devient une erreur de compilation.

declare function route<P extends string>(
  path: P,
  handler: (params: Prettify<ParseRoute<P>>) => void
): void;

route("users/:id", p => { const id: string = p.id; });

L’intérêt des paramètres typés

Le compilateur déduit désormais params directement de la chaîne de route. Renommez un paramètre dans le chemin et chaque gestionnaire met automatiquement à jour les clés attendues. Aucune interface manuelle et aucune divergence entre la route et le gestionnaire.

route("users/:userId", p => {
  const u = p.userId; // ok
  // const x = p.id; // error: id does not exist
});

Étendre l’analyseur

Ce mini-analyseur est la graine d’un routeur typé complet. Vous pouvez ajouter des valeurs typées (paramètres numériques), des caractères génériques et des segments facultatifs, simplement en enrichissant l’utilitaire de chaque segment avec davantage de motifs de modèles. La structure récursive fondée sur les modèles reste la même.

type SegParam2<S extends string> =
  S extends Tpl<':', infer N, '(number)'> ? { [K in N]: number }
  : S extends Tpl<':', infer N> ? { [K in N]: string }
  : {};
// Tpl<...> stands for a backtick template literal type pattern

Vérification rapide

Testez votre compréhension de l’analyseur de routes.

Récapitulatif

Vous avez construit un analyseur de routes exécuté à la compilation.

  • Faites correspondre chaque segment avec l’inférence récursive des littéraux de modèle.
  • Les segments de paramètres (:name) deviennent { name: string }.
  • Les segments littéraux deviennent {} et disparaissent dans l’intersection.
  • Prettify aplatit le résultat en paramètres propres.

Ensuite, dans le cours 25 : la sécurité des types de bout en bout avec tRPC.

Questions Fréquemment Posées

La leçon « Mini-analyseur de routes au niveau des types » est-elle gratuite ?

Oui — le texte complet de « Mini-analyseur de routes au niveau 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 « Mini-analyseur de routes au niveau des types » ?

Analyser des chemins de routes en objets de paramètres typés. 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 « Mini-analyseur de routes au niveau 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. Concepts des combinateurs d’analyse
  2. Découpage de chaînes au niveau des types
  3. Analyser avec les littéraux de modèles
  4. Mini-analyseur de routes au niveau des types
← Retour à TypeScript Academy