TypeScript : éliminer les états impossibles

Quand une interface a plusieurs états, le piège classique consiste à gérer des booléens indépendants : loading, error, success, etc. Le résultat est souvent ambigu, avec des combinaisons impossibles à tester proprement.

Une union discriminée élimine ce problème en rendant chaque état explicite.

1. Définir le modèle

export type LoadState<T> =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: T }
  | { status: 'error'; message: string };

Le compilateur devient alors un allié : si j’ajoute un nouvel état, tous les switch qui l’utilisent doivent être mis à jour. Plus de branches oubliées.

2. Consommer l’état sans ambiguïté

switch (state.status) {
  case 'loading':
    return <span>Chargement…</span>;
  case 'error':
    return <span role="alert">{state.message}</span>;
  case 'success':
    return <span>{state.data.title}</span>;
  default:
    return null;
}

Ce pattern se marie très bien avec les React islands d’un site Astro : un petit composant interactif, mais avec une logique métier très stricte et facile à relire.

3. Contrôler la qualité à la compilation

npm run lint

Le bonus de cette approche, c’est que l’éditeur et la CI voient la même vérité. Si un état manque ou si une branche n’est pas couverte, l’erreur remonte avant le déploiement.