TypeScript pour le frontend : strict, sûr et ergonomique

Activer la rigueur

• "strict": true, noImplicitAny, noUncheckedIndexedAccess
• Isoler le JS avec allowJs désactivé dans les packages qui doivent rester typés

Types plutôt qu’interfaces

• Préférer les types pour composer unions et intersections
• Utiliser satisfies pour valider la forme des objets sans élargissement

Affinage et marquage

• Utiliser des unions discriminées pour les machines à états
• Marquer les identifiants primitifs pour éviter les confusions de types

APIs publiques et DX

• Exporter un minimum de types publics par package
• Éviter d’exposer les détails d’implémentation
• Utiliser zod ou valibot aux frontières pour la validation runtime et l’inférence

Outils

• tsc --noEmit en CI pour tous les packages
• tsconfig.base.json à la racine du monorepo, extensions par package

Exemple : union discriminée

type User = { id: string; name: string };
 
type FetchState =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: User[] }
  | { status: "error"; error: string };
 
function render(s: FetchState) {
  switch (s.status) {
    case "success":
      return <List data={s.data}/>;
    case "error":
      return <Error msg={s.error}/>;
    case "loading":
      return <Spinner/>;
    case "idle":
    default:
      return <Idle/>;
  }
}

Liste de contrôle

• Mode strict activé
• Types définis aux frontières
• Surface publique petite et stable