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:

1. Ajouter TypeScript
2. Ajouter tsconfig.json
3. Commencer simplement
4. Convertir tous les fichiers
5. Augmenter la rigueur [19659006] Nettoyez-le
6. 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:

1. Changer l'extension du fichier en .tsx
2. 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:

1. activer la règle
2. démarrer le projet localement
3. 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

Joe Previte, également connu sous le nom de JavaScript Joe, est un défenseur des développeurs Open Source sur Facebook. Dans ses temps libres, il aime créer des vidéos pour Egghead, écrire des articles sur le codage et diriger un groupe d'étude de méditation en ligne.