Comment migrer une application React vers TypeScript –
Lorsque j'ai commencé à apprendre TypeScript, l'une des suggestions que j'ai souvent entendues était: «convertissez l'un de vos projets existants! C'est la meilleure façon d'apprendre! " Peu de temps après, un ami de Twitter a proposé de faire juste cela – montrez-moi comment migrer une application React vers TypeScript.
Le but de cet article est d'être cet ami pour vous et de vous aider à migrer votre propre projet vers TypeScript. Pour le contexte, je vais utiliser des morceaux d'un projet personnel que j'ai migré tout en passant par ce processus moi-même.
Le plan
Pour rendre ce processus moins intimidant, nous allons le décomposer en étapes afin que vous puissiez exécuter la migration en segments individuels. Je trouve toujours cela utile lorsque je prends une grande tâche. Voici toutes les étapes que nous prendrons pour migrer notre projet:
- Ajouter TypeScript
- Ajouter
tsconfig.json
- Commencer simplement
- Convertir tous les fichiers
- Augmenter la rigueur [19659006] Nettoyez-le
- Célébrez
REMARQUE: l'étape la plus importante de tout ce processus est le numéro 9. Bien que nous ne puissions y arriver qu'en les parcourant dans un ordre séquentiel.
1. Ajouter TypeScript au projet
Tout d'abord, nous devons ajouter TypeScript à notre projet. En supposant que votre projet React a été amorcé avec create-react-app
nous pouvons suivre les documents et exécuter:
npm install --save typescript @ types / node @ types / react @ types / react-dom @ types / jest
ou si vous utilisez du fil
:
fil ajoutez typecript @ types / node @ types / react @ types / react-dom @ types / jest
Notez que nous n'avons encore rien changé en TypeScript. Si nous exécutons la commande pour démarrer le projet localement ( début de fil
dans mon cas), rien ne devrait être différent. Si tel est le cas, tant mieux! Nous sommes prêts pour la prochaine étape.
2. Ajouter le tsconfig.json
Avant de pouvoir tirer parti de TypeScript, nous devons le configurer via le tsconfig.json
. Le moyen le plus simple pour commencer est d'échafauder un en utilisant cette commande:
npx tsc --init
Cela nous donne quelques notions de base.
Nous n'avons pas encore interagi avec TypeScript. Nous n'avons pris que les mesures nécessaires pour préparer les choses. Notre prochaine étape consiste à migrer un fichier vers TypeScript. Avec cela, nous pouvons terminer cette étape et passer à la suivante.
3. Commencez avec un composant simple
La beauté de TypeScript est que vous pouvez l'adopter progressivement. Nous pouvons commencer avec un composant simple pour notre première partie de cette migration. Pour mon projet, je vais commencer par un composant SVG qui ressemble à ceci:
importer React depuis 'react'
const Spinner = () => (
// Par Sam Herbert (@sherb), pour tout le monde. Plus @ http://goo.gl/7AJzbL
)
exporter Spinner par défaut
Pour convertir correctement ceci, nous devons faire deux choses:
- Changer l'extension du fichier en
.tsx
- Ajouter l'annotation de type
Puisque ce composant ne prend aucun accessoire, le seul chose que nous devons changer est la suivante:
import React from 'react'
+ const Spinner: React.FC = () => (
//...le reste du code
)
Vérifions à nouveau que les choses fonctionnent toujours en exécutant le projet pour nous assurer que nous n'avons rien cassé. Remarquez, ici react-scripts
détectera automatiquement les nouveaux changements et modifiera notre tsconfig.json
pour nous! Voila!
Et si tout va bien, notre projet restera en état de marche. Donnez-vous une tape dans le dos! Vous avez correctement migré votre premier fichier vers TypeScript. Si nous voulions nous arrêter ici, nous le pourrions, mais continuons.
4. Convertir tous les fichiers
L'étape suivante consiste à faire ce que nous avons fait pour l'étape 3, mais pour tous les fichiers du projet. Si le projet que vous migrez est assez volumineux, je vous suggère de le faire sur plusieurs itérations. Sinon, vous pourriez vous fatiguer.
Au cours de cette étape, vous devrez peut-être ajouter des packages supplémentaires en fonction des bibliothèques tierces que vous utilisez. Par exemple, j'utilise moment
donc j'ai dû exécuter yarn add -D @ types / moment
pour ajouter les types en tant que devDependency
.
. vous devez garder à l'esprit d'autres éléments lorsque vous procédez comme suit:
- Supprimez les erreurs TypeScript en ajoutant
// @ ts-ignore
sur la ligne précédant l'erreur - Si un fichier utilise jsx (c'est-à-dire [19659041]), l'extension de fichier doit être
.tsx
au lieu de.ts
- Exécutez le projet localement pour vous assurer que les choses fonctionnent toujours (elles devraient l'être)
Après vous avez terminé cette étape, le plus dur est fait! Notre projet sera en TypeScript, mais nous devrons augmenter la rigueur pour profiter des avantages.
5. Augmenter tsconfig.json
Strictness
Nous sommes maintenant prêts à augmenter la rigueur en activant des règles plus strictes dans notre tsconfig.json
. Heureusement, react-scripts
nous informera de toute erreur de type lors de l'exécution locale de notre projet. Nous allons suivre le processus comme suit:
- activer la règle
- démarrer le projet localement
- corriger les erreurs
Et nous répéterons ce processus pour les règles suivantes:
-
"noImplicitAny": true
-
"strictNullChecks": vrai
-
"noImplicitThis": vrai
-
"alwaysStrict": vrai
Je veux partager un conseil. Si vous trouvez que quelque chose a implicitement le type any
et que vous ne savez pas comment y remédier à ce moment-là, non. Créez-le et utilisez-le pour masquer l'erreur:
type d'exportation FixMeLater = any
Notre objectif est d'avancer rapidement et de revenir plus tard pour les corriger.
Cela apportera une plus grande sécurité de type à notre projet. Si vous souhaitez en savoir plus sur les options du compilateur, vous pouvez en lire plus dans le Manuel TypeScript .
Une fois que nous avons fait cela, nous pouvons alors les remplacer:
-
"noImplicitAny": vrai
-
"strictNullChecks": vrai
-
"noImplicitThis": vrai
-
"alwaysStrict": vrai
avec ceci:
qui permet également ces options strictes:
- strictBindCallApply
- strictNullChecks
- strictFunctionTypes
- strictPropertyInitialization
À ce stade, nous avons atteint un niveau standard de rigueur dans notre projet . Si nous voulons ajouter des vérifications supplémentaires, nous pouvons ajouter ces règles:
-
"noUnusedLocals": true
-
"noUnusedParameters": true
-
"noImplicitReturns ": vrai
-
" noFallthroughCasesInSwitch ": vrai
Une fois que nous avons atteint un niveau de rigueur dont nous sommes satisfaits, nous pouvons passer à l'étape suivante.
6. Raccourcis de nettoyage
Si vous avez ajouté @ ts-ignore
ou avez profité d'un type FixMeLater
il est maintenant temps de revenir en arrière et de les corriger. Nous n'avons pas à tout faire en même temps, ou jamais, mais ce serait la dernière étape pour assurer une sécurité maximale du type dans votre projet.
Parfois, l'effort pour les réparer ne vaut pas le temps, et d'autres fois c'est le cas. Vous devrez discuter avec votre équipe et décider de ce qui a du sens.
7. Célébrer
Nous l'avons fait! Nous avons officiellement migré notre projet vers TypeScript. Prenez un moment pour célébrer votre travail. Ce n'était certainement pas une tâche insignifiante. Surtout si vous travaillez dans une grande base de code.
Choses à retenir
Alors que nous réfléchissons à nos efforts, voici quelques points à retenir lors de la migration d'un projet de React vers TypeScript.
Commencez petit
avantage de la capacité de TypeScript à l'adopter progressivement. Allez un fichier à la fois à votre rythme. Faites ce qui a du sens pour vous et votre équipe. N'essayez pas de tout régler en même temps.
Augmenter la rigueur dans le temps
Il n'est pas nécessaire de commencer avec une rigueur maximale dès le début. C'est un voyage. Augmentez le niveau avec le temps. Finalement, vous atteindrez un niveau confortable. Ne vous sentez pas mal si vous n'avez pas 100% de rigueur. Une certaine sécurité de type est meilleure que aucune sécurité de type.
Appuyez-vous sur les raccourcis
Le @ ts-ignore
et le conseil pour FixMeLater
sont là pour aider à alléger le fardeau de la migration. Tout n'a pas besoin d'être changé en même temps. Utilisez les raccourcis selon vos besoins, mais ne vous sentez pas mal de les utiliser. Encore une fois, il s'agit de migrer, mais cela ne devrait pas être douloureux. Au fil du temps, vous pouvez prioriser le remplacement de ces éléments par une sécurité de type appropriée. Mais rappelez-vous, ces outils sont à votre disposition alors utilisez-les.
Ce n'est pas la seule approche pour la migration de projets React vers TypeScript. Cependant, c'est ce qui fonctionne pour moi. J'espère que cela vous aidera autant qu'il m'a aidé.
Pour en savoir plus
Source link