Comment TypeScript améliore la réaction : une expérience de développement plus fluide, moins de bugs (avec un exemple useState)

Commençons par un scénario et une tâche qui lui est associée.

Nous avons une application de messagerie avec une barre d'état qui affiche le statut actuel de l'utilisateur et lui permet de le mettre à jour. Nous devons ajouter une liste déroulante à partir de laquelle l'utilisateur peut modifier son statut et utiliser useState() pour afficher et mettre à jour le statut actuel de l'utilisateur dans l'interface utilisateur.

Pour plus de simplicité, nous nous concentrerons uniquement sur l'implémentation de useState dans cet article, et à la fin de l'article, vous comprendrez comment, même pour un exemple simple, TypeScript est une option beaucoup plus puissante.

La tâche

Nous devons définir un useState() qui stocke et met à jour userStatus et est initialisé avec l'une des cinq options de statut possibles (disons actif).

Toutes les options possibles sont :

1. Actif (actif)
2. Loin (loin)
3. Ne pas déranger (dnd)
4. En congé (congé)
5. Absent du bureau (OOO)

JSX/JS

C'est une tâche très simple, n'est-ce pas ? Tout ce que nous avons à faire est de définir un useState et de l'initialiser à active puis d'utiliser la fonction set pour mettre à jour le statut et nous avons terminé.

Mais attendez ! Que se passe-t-il lorsque quelqu'un examine mon code ou visite ce morceau de code plus tard (disons après 1 semaine, 2 semaines, 1 mois, 6 mois ou autre), comment saura-t-il quelles sont toutes les options possibles/valides ?

Ahh ! Oui, nous pouvons ajouter un commentaire à côté de useState pour leur faire savoir que ce sont toutes les options possibles.

Mais ce n'est pas une bonne solution, non ? Alors, comment pouvons-nous l’améliorer ?

Recherche d'objet

La recherche d'objets est une très bonne solution à notre problème. Commençons donc par définir une recherche d'objet appelée UserStatus et utilisons-la pour définir notre valeur userStatus.

Maintenant, mettons à jour notre définition useState.

Maintenant, essayons de mettre à jour le statut.

Ohh ! Regardez cela, maintenant nous obtenons la saisie semi-automatique dans notre éditeur et pouvons vérifier toutes les valeurs possibles/valides de userStatus en regardant la définition de UserStatus.

Les problèmes liés à la recherche d'objets

Même si la méthode de recherche d'objets a apparemment résolu notre problème et constitue certainement une bien meilleure solution que le simple ajout de commentaires, elle présente toujours deux problèmes majeurs :

1. Pour tous ceux qui visitent notre morceau de code plus tard, ils doivent savoir que nous utilisons une recherche d'objet pour définir notre état. Cela peut sembler trivial, mais imaginez qu'à mesure que notre composant grandit et devient plus complexe, il devient alors très facile pour quelqu'un d'ignorer notre implémentation.
2. Cela n'empêche toujours personne de définir une valeur aléatoire à notre état, même s'il est au courant de la recherche d'objet.  

Alors, comment pouvons-nous résoudre ces problèmes ?
Réponse : Dactylographié

TSX/TS

Recommençons avec notre solution, mais cette fois dans un fichier .tsx ou Typescript. Nous pouvons commencer par définir une fonction useState() et l'initialiser avec la valeur : active.

Rien ne semble différent pour le moment, mais ça l'est. Mettons à jour la valeur userStatus.

Ahh ! Comme vous pouvez le voir, cela nous donne cette redoutable ligne d'erreur rouge ondulée autour de certaines fonctions définies, mais pas sur celles pour lesquelles nous définissons une valeur de chaîne. En effet, Typescript déduit le type de notre état à partir de sa valeur initiale (c'est-à-dire la chaîne de type).

Oui, cela nous empêchera de définir des valeurs non-chaînes sur notre état userStatus, mais cela ne nous empêche toujours pas de définir une valeur de chaîne aléatoire et nous devons toujours utiliser la recherche d'objet pour documenter toutes les options possibles. , vous pouvez demander.
 

Faisons "Une pierre, deux oiseaux".

Types explicites et génériques

Dans Typescript, nous pouvons créer des types personnalisés et il prend également en charge les génériques qui peuvent être utilisés dans React pour ses définitions de hook, dans notre cas le hook useState().

Créons un nouveau type UserStatus dans notre composant React.

Maintenant, utilisons ce type dans notre définition useState.

Jusqu'à présent, tout ressemble à la façon dont nous le faisions dans la méthode de recherche d'objet, mais la magie de Typescript réside lorsque nous commençons à utiliser notre fonction set et la valeur d'état.

1. Obtention de la définition de type de userStatus.
   

2. Saisie semi-automatique pour la fonction setUserStatus.
   

3. Obtenir une validation appropriée pour les valeurs valides et invalides.
   

Regarde ça,

1. Nous pouvons obtenir la documentation de toutes les valeurs valides en survolant simplement le userStatus et en recherchant sa définition de type.
2. Cependant, nous n'avons pas besoin de regarder la définition de type de notre valeur d'état lorsque nous utilisons la fonction set, car elle nous donne automatiquement la saisie semi-automatique pour toutes les options valides.
3. Maintenant, cela nous donne non seulement l'erreur lors de la définition d'une valeur autre qu'une chaîne, mais il nous donne également l'erreur d'utilisation de valeurs de chaîne non valides (c'est-à-dire qu'il donnera toujours des erreurs pour les entrées non valides).

Conclusion

À présent, vous avez probablement une bonne idée de la façon dont TypeScript peut vraiment améliorer notre expérience de développement. Nous n'avons fait qu'effleurer la surface avec un exemple simple ici, mais pensez simplement aux applications du monde réel que nous construisons, l'utilisation de TypeScript pourrait signifier beaucoup moins de bogues et une bien meilleure expérience globale pour les développeurs.

J'espère que cet article vous encouragera à commencer à utiliser Typescript dans toutes vos applications React et à créer des expériences Web impressionnantes.

Si vous avez aimé cet article et souhaitez vous connecter, vous pouvez vous connecter avec moi sur Linked et X/Twitter

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!