Template Literal Types

TypeScript 🔴 Senior

Définition

Types construits via des template strings qui combinent des types littéraux. Permettent de générer dynamiquement des types a partir de patterns de chaînés.

Analogie

Comme un générateur de noms compose — prénom + nom donne toutes les combinaisons possibles automatiquement.

Exemple de code

type Event = "click" | "focus";
type Handler = `on${Capitalize<Event>}`;
// "onClick" | "onFocus"
type Locale = `${"en" | "fr"}-${"US" | "FR"}`;
// "en-US" | "en-FR" | "fr-US" | "fr-FR"

Cas d'usage

Typer des clés CSS, des routes API ou des noms d'evenements générés dynamiquement.

Anti-pattern

Générer des unions trop larges avec des template literals — explosion combinatoire qui ralentit le compilateur.

Termes liés

#advanced#interview#type-system

En entretien

Explique-moi ce que sont les template literal types.
Ce sont des types construits via des template strings qui combinent des types littéraux, permettant de générer dynamiquement des types à partir de patterns de chaînes.
Quel est le piège de performance avec ce pattern ?
Générer des unions trop larges avec des template literals crée une explosion combinatoire qui ralentit le compilateur.
Dans quel cas utiliserais-tu ce pattern ?
Pour typer des clés CSS, des routes API ou des noms d'événements générés dynamiquement, comme `on${Capitalize<Event>}`.

Fiche mise à jour le 2026-09-27