Comment migrer de Javascript vers Typescript à l'aide de l'outil ts-migrate

May 01 2023
Typescript (TS) est génial ! Il rend le code plus clair, facile à entretenir et évite les erreurs courantes. Vous avez décidé que c'était le meilleur choix pour votre équipe, et maintenant vous voulez l'adopter.

Typescript (TS) est génial ! Il rend le code plus clair, facile à entretenir et évite les erreurs courantes. Vous avez décidé que c'était le meilleur choix pour votre équipe, et maintenant vous voulez l'adopter. Hourra !

Oups… Ce n'est pas aussi facile qu'il y paraît d'adopter TS . C'est très fastidieux et chronophage. Alors, comment migrer de JS vers TS ? Avec ChatGPT ! Pas encore .
Mais utiliser ts-migrate peut faciliter le travail .

À propos de ts-migrate

ts-migrate est un outil pour aider à migrer le code vers TypeScript. Il prend un projet JavaScript (JS) ou un projet TypeScript partiel et donne un projet TypeScript compilé.

Nous avons utilisé ts-migrate pour convertir 1 000 fichiers de notre projet de JS en TS. Cela nous a fait gagner un temps précieux et a rendu le processus très pratique.

Installation et configuration de TS

Avant de démarrer le processus de migration, nous devons installer et configurer TS :

  • Installez le package TS :
  • npm install typescript --save-dev
    

    npx tsc --init
    

    npm install --save-dev @types/react
    

Nous utiliserons ts-migrate pour migrer nos fichiers JS vers TS :

  • Installez ts-migrate :
  • npm install --save-dev ts-migrate
    

    yarn ts-migrate rename <project-dir> --sources <specific-dir>
    

    yarn ts-migrate migrate <project-dir> --sources <specific-dir>/file.tsx
    

Exemple

J'ai créé ce projet ts-migrate-example pour démontrer un processus de migration. Clonez-le sur votre machine :

git clone https://github.com/shai20099/ts-migrate-example.git

yarn ts-migrate rename ./ --sources ./src/examples

Notre prochaine étape consiste à appliquer le script de migration au fichier d'exemple :

yarn ts-migrate migrate ./ --sources ./src/examples/example.ts

ts-migrate détecte que nous essayons d'attribuer une chaîne à une variable numérique
ts-migrate remarque que nous tentons de réaffecter une valeur à une variable constante
ts-migrate ajoutant n'importe quel type là où il n'est pas déclaré
ts-migrate déclarant les propriétés manquantes à une classe

Remarque : Lorsque ts-migrate ne peut pas résoudre automatiquement les problèmes TS, il laisse un commentaire @ts-expect-error avec les détails de l'erreur.

Remarque : Bien que ts-migrate place les types dans les variables, si nécessaire, nous devons toujours nous rappeler de remplacer les types quelconques par des types spécifiques.

Remarque : ts-migrate utilise des plugins pour effectuer des modifications automatiquement. Vous pouvez lui faire prendre plus d'actions automatiquement en créant des plugins personnalisés pour votre projet. Plus de détails ici .

Résumé

ts-migrate est un outil pour aider à migrer le code de JS vers TS. Son objectif principal est de créer un code compilé, et il corrige également certaines erreurs automatiquement en utilisant des plugins. Même si ts-migrate n'est pas un outil entièrement automatisé, nous le trouvons très utile car il détecte les écarts entre JS et TS, corrige ce qu'il peut et marque le code qui doit être corrigé manuellement. Cela permet de gagner un temps considérable dans le processus de migration, en particulier lorsque vous avez de nombreux fichiers à migrer.

Bonne chance!