Qu'est-ce que le type narrowing et comment le compilateur le fait-il?

Question

Accepted Answer

Le **narrowing** est la façon dont TypeScript affine un type large (comme une union) en un type plus spécifique dans une branche de code, en fonction des vérifications d'exécution. Le compilateur suit le flux de contrôle et met à jour le type en conséquence.

```ts
function process(x: string | number) {
  if (typeof x === "string") {
    x.toUpperCase(); // ✅ here x is narrowed to string
  } else {
    x.toFixed(2);    // ✅ here x must be number
  }
}
```

## Les outils de narrowing

```ts
typeof x === "string"          // typeof guard — for primitives
x instanceof Date              // instanceof — for classes
"role" in obj                  // in operator — property existence
Array.isArray(x)               // built-in guards
if (x) { ... }                  // truthiness narrows out null/undefined/0/""
if (x === null) { ... }         // equality narrowing
```

## Les unions discriminées réduisent proprement

```ts
type Shape =
  | { kind: "circle"; r: number }
  | { kind: "square"; side: number };

function area(s: Shape) {
  switch (s.kind) {            // the discriminant
    case "circle": return Math.PI * s.r ** 2;  // s is the circle variant
    case "square": return s.side ** 2;          // s is the square variant
  }
}
```

La vérification du champ littéral partagé (`kind`) indique au compilateur exactement quelle variante vous avez, déverrouillant les propriétés de cette variante.

## Les gardes personnalisés étendent le narrowing

```ts
function isUser(x: unknown): x is User { return !!x && typeof (x as any).name === "string"; }
```

## Pourquoi c'est important

Le narrowing est ce qui rend les types union *utilisables* — il vous permet d'accéder en toute sécurité aux membres spécifiques au type uniquement après avoir prouvé le type, transformant les vérifications d'exécution en garanties de compilation.

C'est le mécanisme quotidien derrière la gestion de `string | number`, `T | null` et des états étiquetés.