Template literal types & les utilitaires, ou quand s'arrêter Template literal types & utilities, or when to stop

Des noms de type fabriqués à partir de chaînes — et qui suivent leur source.Type names built from strings — and tracking their source.

Dernière marche du langage des types : composer des types à partir de chaînes. Un ensemble d'événements (click, focus, blur) appelle un ensemble de handlers (onClick, onFocus, onBlur) — deux listes qui doivent rester en phase. Réécrites à la main, elles divergent au premier ajout. Le template literal type les dérive : on prend les clés, on les capitalise, on les préfixe — et les handlers se recalculent à chaque changement de la source.The top step of the type language: composing types from strings. A set of events (click, focus, blur) calls for a set of handlers (onClick, onFocus, onBlur) — two lists that must stay in sync. Hand-written, they diverge on the first addition. The template literal type derives them: take the keys, capitalize, prefix — and the handlers recompute on every source change.

type Events = { click: MouseEvent; focus: FocusEvent; blur: FocusEvent };

// les props handlers, réécrites à la main — un event ajouté, un handler oublié :
type Handlers = {
  onClick: (e: MouseEvent) => void;
  onFocus: (e: FocusEvent) => void;
  // onBlur manquant — et rien ne le signale
};

type Events = { click: MouseEvent; focus: FocusEvent; blur: FocusEvent };

type Handlers = {
  [K in keyof Events as `on${Capitalize<K & string>}`]: (e: Events[K]) => void;
};
// ≡ { onClick; onFocus; onBlur } — CALCULÉ depuis Events, jamais désynchronisé

Un template n'assemble pas : il multiplie les unions — et sait parser une chaîne.A template doesn't assemble: it multiplies unions — and can parse a string.

Deux surprises. D'abord, un template sur des unions fait un produit cartésien : 2 tailles × 2 couleurs donnent 4 littéraux, et l'on génère des milliers de types sans s'en rendre compte. Ensuite, combiné à infer, le template ne se contente pas de composer — il décompose : il reconnaît une forme de chaîne et en capture les morceaux. On parse GET /users au niveau type. Puissance grisante, et c'est exactement là que commence le danger.Two surprises. First, a template over unions makes a cartesian product: 2 sizes × 2 colors give 4 literals, and you generate thousands of types without realizing it. Second, combined with infer, the template doesn't just compose — it decomposes: it recognizes a string shape and captures its pieces. You parse GET /users at the type level. Heady power, and that's exactly where the danger begins.

type Size  = "sm" | "lg";
type Color = "red" | "blue";

type Variant = `${Size}-${Color}`;
// "sm-red" | "sm-blue" | "lg-red" | "lg-blue"  — produit cartésien : 2 × 2 = 4
// 5 tailles × 8 couleurs × 4 états = 160 littéraux générés d'un coup

Le template applique chaque combinaison : toutes les tailles × toutes les couleurs. Le compte explose multiplicativement — quelques unions modestes suffisent à générer des milliers de littéraux, que tsc doit tous matérialiser. La commodité d'écriture cache un coût qui grimpe vite.The template applies every combination: all sizes × all colors. The count explodes multiplicatively — a few modest unions suffice to generate thousands of literals, all of which tsc must materialize. The writing convenience hides a cost that climbs fast.

Composer, transformer la casse, remapper les clés, parser — tout le volume réuni.Compose, change case, remap keys, parse — the whole volume, together.

Quatre briques. La syntaxe template (préfixe, interpolation, suffixe) compose une chaîne. Quatre utilitaires intégrés — Uppercase, Lowercase, Capitalize, Uncapitalize — transforment la casse. Le key remapping du 6.1 (le as dans un mapped type) renomme les clés via un template. Et infer du 6.2 parse une chaîne. Mis ensemble, c'est de la vraie programmation de chaînes au niveau type — la synthèse de tout le Vol 6 en une seule expression.Four bricks. Template syntax (prefix, interpolation, suffix) composes a string. Four built-in utilities — Uppercase, Lowercase, Capitalize, Uncapitalize — change case. The key remapping from 6.1 (the as in a mapped type) renames keys via a template. And infer from 6.2 parses a string. Put together, it's genuine type-level string programming — the synthesis of all of Vol 6 in a single expression.

type A = Uppercase<"get">;       // "GET"
type B = Capitalize<"click">;    // "Click"
type C = `on${Capitalize<"focus">}`;   // "onFocus"
// Uppercase, Lowercase, Capitalize, Uncapitalize : intégrés au compilateur

// La synthèse du volume : mapped + remapping as (6.1) + template (6.3).
type Getters<T> = {
  [K in keyof T as `get${Capitalize<K & string>}`]: () => T[K];
};

type U = Getters<{ name: string; age: number }>;
//   { getName: () => string; getAge: () => number }

La type-gymnastique : impressionnante, lente, illisible — pour zéro garantie de plus.Type-gymnastics: impressive, slow, unreadable — for zero extra guarantee.

Voici le contre-exemple obligatoire du volume entier. Parser les paramètres d'une route en un type objet, par template récursif et infer, est faisable — et c'est précisément le piège. Le type met une fraction de seconde à se résoudre, l'éditeur l'affiche en points de suspension, et personne ne sait pourquoi un cas tombe sur l'objet vide. La question n'est jamais « est-ce possible ? », mais « est-ce que ça m'achète une synchro réelle, ou est-ce que je me prouve que je sais le faire ? ».Here's the whole volume's mandatory counter-example. Parsing a route's params into an object type, by recursive template and infer, is doable — and that's precisely the trap. The type takes a fraction of a second to resolve, the editor shows it as an ellipsis, and no one knows why a case lands on the empty object. The question is never 'is it possible?', but 'does it buy me a real sync, or am I proving I can do it?'.

// "Parser les params d'une route en un objet typé" — au niveau type :
type Params<P> =
  P extends `${string}:${infer Name}/${infer Rest}`
    ? { [K in Name | keyof Params<`/${Rest}`>]: string }
    : P extends `${string}:${infer Last}`
      ? { [K in Last]: string }
      : {};

type R = Params<"/users/:id/posts/:postId">;   // { id: string; postId: string }
// récursif, illisible, lent à typer — et indéboguable quand un cas tombe sur {}

Ça marche, et c'est le problème : la prouesse fait oublier le coût. Lent à typer, illisible, sans débogueur — et la « garantie » n'existe que si les routes changent souvent et restent l'unique source. Pour un projet où elles bougent deux fois l'an, c'est une dette pure.It works, and that's the problem: the feat hides the cost. Slow to typecheck, unreadable, no debugger — and the "guarantee" only exists if the routes change often and stay the single source. For a project where they move twice a year, it's pure debt.