Comment migrer une application React vers TypeScript

Migration d'un projet React existant vers TypeScript: guide étape par étape

Lorsque vous apprenez le premier dactylographie, vous entendez souvent des suggestions: "Changez un projet existant! C'est la meilleure façon d'apprendre!" Migrez une application React vers TypeScript.

Cet article est destiné à être votre ami et à vous aider à migrer vos projets vers TypeScript. Pour illustrer, j'utiliserai des fragments de mon projet personnel que j'ai migré pendant le processus de migration.

points clés

• Commencez à migrer les applications REACT vers TypeScript en ajoutant TypeScript au projet, en ajoutant tsconfig.json, en commençant par la simplicité, en convertissant tous les fichiers, en augmentant la rigueur, en nettoyant et en célébrant les migrations réussies.
• Étape en adoptant TypeScript, en commençant par un composant simple. Modifiez l'extension de fichier en .TSX et ajoutez un commentaire de type. Convertissez tous les fichiers du projet étape par étape.
• Améliorer la rigueur de tsconfig.json en permettant des règles plus strictes. Cela peut être fait étape par étape, les réparant lorsque des erreurs se produisent. L'objectif est d'avancer rapidement et de revenir plus tard pour résoudre tout problème.
• Utilisez des raccourcis comme @ ts-ingniore et Fixmelater pour soulager la charge pendant le processus de migration. Au fil du temps, priorisez le remplacement de ces raccourcis par la sécurité correcte.

plan

Pour rendre ce processus moins intimidant, nous le décomposerons en étapes afin que vous puissiez effectuer la migration en morceaux. Je trouve toujours cela utile pour faire face à de grandes tâches. Voici toutes les étapes que nous prendrons pour migrer notre projet:

1. Ajouter TypeScript
2. Ajouter tsconfig.json
3. Commencez par la simplicité
4. Convertir tous les fichiers
5. Améliorer la rigueur
6. nettoyage
7. Célébrez

Remarque: L'étape la plus importante de l'ensemble du processus est l'étape 7. Bien que nous ne puissions effectuer ces étapes que pour y arriver.

1.

Tout d'abord, nous devons ajouter TypeScript à notre projet. En supposant que votre projet React est démarré avec Create-React-App, nous pouvons l'exécuter selon le document:

<code>npm install --save typescript @types/node @types/react @types/react-dom @types/jest</code>

ou si vous utilisez du fil:

<code>yarn add typescript @types/node @types/react @types/react-dom @types/jest</code>

Veuillez noter que nous n'avons pas encore rien changé en TypeScript. Si nous exécutons la commande pour démarrer le projet localement (début du fil dans mon cas), rien ne change. Si tel est le cas, ce serait génial! Nous sommes prêts à passer à l'étape suivante.

2.

Avant que nous puissions tirer parti de TypeScript, nous devons le configurer via tsconfig.json. La façon simple de commencer est d'en créer une en utilisant la commande suivante:

Cela nous donne quelques connaissances de base.

<code>npx tsc --init</code>

Nous n'avons pas encore interagi avec TypeScript. Nous avons juste pris les mesures nécessaires pour nous préparer. Notre prochaine étape consiste à migrer le fichier vers TypeScript. Avec cela, nous pouvons terminer cette étape et passer à l'étape suivante.

3.

La beauté de TypeScript est que vous pouvez l'adopter étape par étape. Nous pouvons commencer la première partie de la migration à partir d'un composant simple. Pour mon projet, je vais commencer par un composant de bouton qui ressemble à ceci:

<code>npm install --save typescript @types/node @types/react @types/react-dom @types/jest</code>

Pour le convertir correctement, nous devons faire deux choses:

Modifiez l'extension de fichier en .tsx
Ajouter un commentaire de type

Puisque ce composant utilise deux accessoires, nous devons changer quelque chose:

<code>yarn add typescript @types/node @types/react @types/react-dom @types/jest</code>

Vérifions que tout fonctionne correctement en exécutant le projet pour vous assurer que nous ne briserons rien. Veuillez noter qu'ici React-Scripts détecte automatiquement de nouvelles modifications et modifiez tsconfig.json pour nous! Regarder! À quel point est-ce beau?

Si tout se passe bien, notre projet restera fonctionner. Tapez votre dos! Vous avez migré avec succès votre premier fichier vers TypeScript. Si nous voulons nous arrêter ici, nous le pouvons, mais continuons à avancer.

4.

L'étape suivante consiste à effectuer l'étape 3 sur tous les fichiers du projet. Si le projet que vous migrez est assez important, je vous recommande de faire ces itérations multiples. Sinon, vous pouvez vous épuiser.

Dans cette étape, vous devrez peut-être ajouter des packages supplémentaires en fonction de la bibliothèque tierce que vous utilisez. Par exemple, j'utilise un moment, je dois donc exécuter le fil add -d @ types / Moment pour ajouter le type comme DevDependance.

En faisant cela, vous devez vous souvenir des points suivants:

supprimer l'erreur TypeScript en ajoutant // @ ts-ingnore dans la ligne avant l'erreur

• Si le fichier utilise JSX (c'est-à-dire
• ), l'extension de fichier doit être .tsx au lieu de .ts Exécutez le projet localement pour vous assurer que tout fonctionne (ils devraient l'être)
Après avoir terminé cette étape, le travail difficile est terminé! Notre projet utilisera TypeScript, mais nous devons augmenter notre rigueur pour profiter de ses avantages.

5.

Maintenant, nous pouvons améliorer la rigueur en permettant des règles plus strictes dans tsconfig.json. Heureusement, React-Scripts nous informe de tout type d'erreur lors de l'exécution de notre projet localement. Nous suivrons les étapes ci-dessous:

Activer les règles

Projet de démarrage local
Correction de l'erreur
3. Nous répéterons ce processus pour les règles suivantes:

"noimplicitany": true

"StrictNullChecks": true
"noimplicitthis": true
"Alwaysstrict": true
• Je veux partager une astuce. Si vous trouvez que quelque chose a implicitement type et que vous ne savez pas comment le réparer à ce stade, ne le réparez pas. Créez ceci et utilisez-le pour éliminer les erreurs:

Notre objectif est d'avancer rapidement et de revenir pour résoudre ces problèmes plus tard.

Cela apportera une plus grande sécurité de type à nos projets. Si vous souhaitez en savoir plus sur les options de compilateur, vous pouvez lire le contenu pertinent dans le manuel TypeScript.

Une fois cela fait, nous pouvons les remplacer:

• "noimplicitany": true
• "StrictNullChecks": true
• "noimplicitthis": true
• "Alwaysstrict": true

Utilisez ceci:

• "strict": true

Cela permet également ces options strictes:

• strictbindCallApply
• strictNullChecks
• strictFunctionTypes
• strictPropertyinialization

À ce stade, nous avons atteint le niveau de rigueur standard dans le projet. Si nous voulons ajouter des vérifications supplémentaires, nous pouvons ajouter ces règles:

• "NounusedLocals": true
• "PARAMETRES NOM-UNS": Vrai
• "NOMPLICTRETRATURNS": true
• "nofallthroughCasesInSwitch": true

Une fois que nous atteignons le niveau de rigueur dont nous sommes satisfaits, nous pouvons passer à l'étape suivante.

6.

Si vous avez ajouté @ ts-ingniore ou utilisé le type FixMelater, il est temps de revenir en arrière et de les réparer. Nous n'avons pas à faire tout cela en même temps, ou jamais, mais ce sera la dernière étape pour assurer une sécurité maximale de type dans le projet.

Parfois, l'effort pour les résoudre ne vaut pas le temps, mais parfois cela en vaut la peine. Vous devez discuter avec votre équipe et décider ce qui a du sens.

7.

Nous l'avons fait! Nous avons officiellement déplacé le projet vers TypeScript. Prenez le temps de célébrer votre travail. Ce n'est certainement pas une question triviale. Surtout si vous travaillez dans une grande base de code.

choses à retenir

Alors que nous passons en revue notre travail, voici certaines choses à retenir lors de la migration de notre projet React vers TypeScript.

Commencez à partir de petites choses

Utilisez la possibilité d'adopter progressivement TypeScript. Faites-le un document à la fois, à votre rythme. Faites ce qui a du sens pour vous et votre équipe. N'essayez pas de résoudre tous les problèmes à la fois.

Advance Strict dans le temps

pas besoin d'être de rigueur maximale depuis le début. C'est un voyage. Augmenter le niveau avec le temps. Finalement, vous atteindrez un niveau qui se sent à l'aise. Ne vous sentez pas triste si vous n'avez pas de stricte 100%. Une certaine sécurité de type est meilleure que la sécurité de type.

s'appuyer sur les raccourcis

@ ts-ingniore et les conseils Fixmelater peuvent aider à soulager le fardeau de la migration. Tout ne doit pas être changé en même temps. Utilisez les raccourcis au besoin, mais ne vous sentez pas mal de les utiliser. Encore une fois, le fait est la migration, mais cela ne devrait pas être très douloureux. Au fil du temps, vous pouvez hiérarchiser les remplacer par la bonne sécurité de type. Mais n'oubliez pas que ces outils sont disponibles pour vous, alors utilisez-les.

Ce n'est pas le seul moyen de migrer les projets React vers TypeScript. Cependant, cela fonctionne pour moi. J'espère que cela vous aide autant que cela m'aide.

lecture plus approfondie

• réagir avec TypeScript: meilleures pratiques
• moyens pratiques d'améliorer les compétences de typeScript
• Comment TypeScript fait de vous un meilleur développeur JavaScript
• javascript: du débutant à ninja, deuxième édition
• réagir et réagir natif - deuxième édition

Un merci spécial à Karl Horky, qui a contacté en expliquant que le type React.FC n'est pas recommandé car il a peu d'avantages et présente des inconvénients. Pour plus d'informations, consultez cette discussion GitHub.

FAQ sur les applications de réact migration vers TypeScript

Qu'est-ce que TypeScript et pourquoi devrais-je envisager de migrer mon application React vers elle? TypeScript est un superset typiquement typé de JavaScript qui fournit une vérification améliorée de type, une qualité de code et une prise en charge des outils. La migration vers TypeScript peut vous aider à attraper des erreurs au moment de la compilation, à améliorer la maintenabilité du code et à améliorer l'expérience du développeur lors de la gestion des applications React.

Comment commencer à migrer mon application React vers TypeScript? Pour commencer, vous pouvez ajouter TypeScript à votre projet à l'aide d'un outil comme Create React App avec des modèles TypeScript, ou configurer manuellement votre projet pour prendre en charge TypeScript. Vous devez également renommer vos fichiers .js et .jsx aux .ts et .tsx respectivement.

Quel est le processus de conversion de mon code JavaScript en TypeScript? Ce processus comprend généralement: a. b. Ajouter des commentaires de type à vos variables, fonctions et accessoires. c. d.

Puis-je déplacer mon application React vers TypeScript étape par étape? Oui, vous pouvez migrer étape par étape de votre application. Vous pouvez convertir des composants ou des modules un à la fois tout en maintenant une base de code JavaScript existante. De cette façon, vous pouvez passer à TypeScript étape par étape sans interrompre votre flux de travail de développement.

Quels sont les avantages de l'utilisation de TypeScript et de la réaction? Certains avantages incluent une meilleure qualité de code, une amélioration de la productivité des développeurs, une saisie automatique de code améliorée, des outils de refactorisation plus puissants et une détection précoce des erreurs courantes. Il fournit également du code plus clair et plus auto-documentaire via des annotations de type.

Comment gérer les bibliothèques et les dépendances tierces lors de la migration vers TypeScript? Vous pouvez trouver des fichiers de définition de type TypeScript pour de nombreuses bibliothèques populaires (généralement avec l'extension .d.ts) sur définitivement Typed, ou utiliser des outils comme @Types. Si la définition de type n'est pas disponible, vous pouvez créer votre propre définition de type ou utiliser n'importe quel type de type pour gérer les bibliothèques non typées.

Comment configurer mes outils de développement et mon IDE pour utiliser TypeScript dans l'application React? Les éditeurs de code les plus populaires et les IDE tels que Visual Studio Code ont une excellente prise en charge de TypeScript. Vous pouvez installer des plugins et des extensions TypeScript pour votre éditeur afin de bénéficier d'une intégration de typescript, d'une assurance automatique et d'une vérification des erreurs.

Quels défis courants ai-je lors de la migration vers la migration vers TypeScript? Les défis courants incluent la résolution des erreurs de type, la gestion des bibliothèques tierces qui manquent de définitions de type, la compréhension des systèmes de types de typeScript et l'adaptation à des vérifications de type plus strictes que TypeScript applique.

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!