Partie 1 : Découvrir React
Partie 2 : Acquérir les bases de React
Partie 3 : Aller plus loin avec React
Partie 4 : Bonus
Partie 5 : Obtenir votre sticker React

3.2. Utiliser useState avec TypeScript

Notre exemple précédent fonctionne, et est tout à fait valide. Cependant, nous n’avons pas profiter du typage de TypeScript pour déclarer les valeurs que nous souhaitons manipuler dans notre state. Heureusement, l’intégration de TypeScript avec les Hooks est plutôt simple, il suffit d’utiliser le concept de généricité de TypeScript (le truc avec des crochets <> 😉, si vous vous en rappelez bien). Voici ce que cela donne côté code, à la ligne 4 de votre fichier App.tsx :

const [name, setName ] = useState<String>("React");

Comme vous pouvez le constater, il suffit d’ajouter <String> juste après avoir appeler useState. Cela permet de typer les données sauvegardées dans le state, et ainsi s’assurer du type de données géré par notre state. Dans notre cas, nous indiquons à React que seule une chaîne de caractère peut être sauvegarder dans notre état name.

D’ailleurs, le code suivant ne fonctionnera pas, et ne pourra même pas être compilé par TypeScript :

const [name, setName ] = useState<String>(144); // Erreur, seul des String peuvent être gérées par le state.
const [count, setCount] = useState<number>("React") // Encore faux ! Cette fois-ci il faut passer un nombre.
const [count, setCount] = useState<number>(0) // Pas mal du tout ça, je crois que vous avez compris. :D 

Parfait, nous avons maintenant mis en place un state au niveau de notre composant React, et nous lui avons ajouté un type.

Nous sommes prêt pour passer à la suite !