TypeScript : des patterns React qui passent à l’échelle en production

TypeScript n’est pas remplir le code de types jusqu’à ce que le compilateur se taise. Dans les projets React moyens et grands, l’objectif est d’éviter les bugs et clarifier ce que chaque couche attend.

Après des années de React en production (AEM, LGPD, produits propres), ces patterns aident quand l’équipe grandit.

---

1. Modélisez le domaine avant le composant

Au lieu de data: any, définissez les types près du hook ou du service :

tsCopier
export type PricePoint = {
  date: string
  value: number
  marketplace: 'amazon' | 'mercadolivre' | 'shopee'
}

export type ProductSummary = {
  id: string
  title: string
  currentPrice: number
  history: PricePoint[]
}

Le composant reçoit ProductSummary — pas du JSON API brut. Si le backend change, l’erreur apparaît au bon endroit.

---

2. Utilisez des unions pour l’état UI

Loading, erreur, vide et succès sont plus sûrs avec une union discriminée :

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

En JSX, un switch avec never dans default force tous les cas — et évite d’afficher data pendant le chargement.

---

3. Props claires, pas de nombreux booléens

Préférez une variante nommée à cinq flags true/false :

tsCopier
// ❌ difficile à maintenir
type ButtonProps = { primary?: boolean; danger?: boolean; ghost?: boolean }

// ✅ clair et extensible
type ButtonProps = {
  variant?: 'primary' | 'secondary' | 'ghost' | 'danger'
  size?: 'sm' | 'md' | 'lg'
}

Dans un design system, cela évite des combos invalides (primary + ghost en même temps).

---

4. satisfies et as const pour les configs

Menus, routes et feature flags restent typés sans perdre les valeurs littérales :

tsCopier
const NAV_ITEMS = [
  { href: 'expertise', key: 'expertise' },
  { href: 'projects', key: 'projects' },
] as const satisfies ReadonlyArray<{ href: string; key: string }>

Vous gardez l’autocomplétion et la validation à la définition.

---

5. Validation à la frontière API (Zod ou similaire)

TypeScript disparaît après le build. La validation runtime à l’entrée protège l’UI :

tsCopier
const ProductSchema = z.object({
  id: z.string(),
  title: z.string(),
  currentPrice: z.number().nonnegative(),
})

const product = ProductSchema.parse(await response.json())

Surtout avec des APIs tierces ou du scraping, où le payload peut changer sans préavis.

---

Conclusion

TypeScript scale quand les types décrivent le contrat entre couches — pas quand ils décorent le JSX.

Commencez par le domaine, modélisez l’état async avec des unions, simplifiez les props et validez à la frontière. L’équipe gagne en vitesse avec plus de confiance au deploy.