Comment utiliser TypeScript avec React pour éviter les bugs ?

Je développe un projet React en ce moment et j'ai décidé d'essayer TypeScript pour voir si ça améliore vraiment les choses. Mais j'trouve ça un peu confus d'intégrer les types avec les composants, les hooks et les props. Quelqu'un qui utilise déjà TypeScript pourrait me donner un conseil sur comment commencer sans me perdre complètement?

2 réponses

★ Meilleure réponse

L'astuce, c'est de commencer à typer les props de tes composants avec `interface` ou `type`, genre `interface Props { nom: string; age: number; }` et puis utiliser ça dans le composant `function Comp({ nom, age }: Props)`. Pour les hooks, TypeScript infère déjà pas mal tout seul (si tu fais `useState(0)`, il sait que c'est number), mais quand c'est un objet plus complexe là tu tapes manuellement : `const [user, setUser] = useState<{ name: string; email: string } | null>(null)`. Commence par là, laisse le reste venir progressivement - essaie pas de tout typer d'un coup ou ça devient le bordel.

Commence par typer les props avec `interface`, mais le truc malin c'est d'utiliser `React.FC<Props>` ou encore mieux juste `function Comp(props: Props)` pour pas avoir de confusion avec le typage des children. Ce qui piège beaucoup de gens c'est d'essayer de tout typer dès le premier jour - concentre-toi sur les props et l'état d'abord, laisse les types implicites à certains endroits où TypeScript les infère tout seul, sinon tu finis par avoir l'impression de lutter contre le langage au lieu de l'utiliser à ton avantage.

Votre réponse

Se connecterpour répondre.