Discriminated Union

TypeScript 🟡 Mid

Définition

Union de types partageant une propriété commune (discriminant) qui permet a TS de distinguer chaque variante. Pattern fondamental pour modéliser des états.

Analogie

Comme des colis avec une étiquette de couleur — la couleur suffit pour savoir quel traitement appliquer.

Exemple de code

type Result =
  | { status: "ok"; data: string }
  | { status: "error"; message: string };
function handle(r: Result) {
  if (r.status === "ok") r.data; // string
  else r.message; // string
}

Cas d'usage

Modéliser des états applicatifs (loading/success/error) avec exhaustivité garantie par le compilateur.

Anti-pattern

Utiliser des booléens multiples (isLoading, hasError) au lieu d'une union discriminée — états impossibles deviennent possibles.

Termes liés

#core#interview#pattern

En entretien

Explique-moi ce qu'est une discriminated union.
C'est une union de types qui partagent une propriété commune, le discriminant, qui permet à TypeScript de distinguer chaque variante et de modéliser des états applicatifs.
Pourquoi préférer une discriminated union à plusieurs booléens comme isLoading/hasError ?
Avec des booléens multiples, des états impossibles deviennent possibles, alors qu'une union discriminée garantit l'exhaustivité à la compilation.
Comment TypeScript sait quel champ est accessible dans chaque branche du if ?
Il narrow le type via le discriminant, par exemple `r.status === "ok"`, donc dans cette branche seul le champ correspondant comme `data` est accessible.

Fiche mise à jour le 2026-09-27