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

Installez TypeScript et configurez tsconfig.json, permettez aux pertes de prendre en charge les fichiers JavaScript et TypeScript mixtes; 2. Commencez par des modules orphelins tels que les fonctions d'outil, renommez progressivement le fichier .js sur .ts et corrigez les erreurs de type. Vous pouvez d'abord utiliser JSDOC pour améliorer l'inférence du type; 3. Activer progressivement les règles de vérification stricte en mode strict, résolvez des problèmes tels que Noimplicitany et StrictNullChecks un par un pour éviter les abus de @ ts-ingniore; 4. Installez le package @Types pour les bibliothèques tierces, créez des fichiers de déclaration dans le répertoire des types lorsque les types sont manquants et configurez Typeroot; 5. Intégrer TSC dans le processus de construction, configurer des scripts de type de type et les exécuter dans CI pour éviter la dégradation du type; 6. Ajouter une définition d'interface ou de type lors du refactorisation, remplacer tous les types spécifiques et maintenir des améliorations incrémentielles; 7. L'équipe a introduit l'intégration Eslint et TypeScript, la prise en charge de l'éditeur de configuration et le mode de définition de type partagé. La clé de la migration est de progresser progressivement plutôt que de réécrire et d'atteindre la sécurité du type par une petite itération. Même une certaine adoption peut réduire efficacement les bogues de l'environnement de production. L'objectif ultime est d'améliorer en continu la couverture de type sans interrompre les fonctions existantes.

La migration d'un projet JavaScript vers TypeScript ne consiste pas à réécrire tout du jour au lendemain - il s'agit d'ajouter progressivement la sécurité de type tout en gardant votre code fonctionnel. Voici comment le faire étape par étape, sans casser votre application ou votre flux de travail d'équipe.

1. Configurer TypeScript dans votre projet

Commencez par installer TypeScript et configurez le fichier de configuration.

 NPM Install TypeScript - Save-DEV
NPM Install @ Types / Node - Save-Dev # Types communs, ajustez au besoin

Créez un fichier tsconfig.json pour définir comment TypeScript doit se comporter:

 {
  "CompilerOptions": {
    "cible": "es2020",
    "Module": "CommonJs",
    "Allowjs": vrai,
    "outdir": "./dist",
    "rootdir": "./src",
    "Strict": vrai,
    "esmoduleInterop": true,
    "skiplibcheck": vrai,
    "ForceConsistentCasingInFilenames": True
  },
  "Inclure": ["src / ** / *"]
}

Options clés:

• "allowJs": true - vous permet de conserver les fichiers .js tout en ajoutant progressivement .ts .
• "strict": true - permet la vérification du type strict (recommandé pour les nouvelles conversions).
• "outDir" et "rootDir" - gardez votre sortie compilée organisée.

Vous pouvez générer ce fichier de manière interactive:

 NPX TSC - Init

2. Commencez avec des fichiers isolés plus petits

N'essayez pas de convertir l'intégralité de votre base de code à la fois. Commencez par:

• Fonctions utilitaires
• Modules d'assistance
• Composants purs (dans les applications React / Vue)

Renommer un fichier .js sur .ts (ou .tsx si vous utilisez React avec JSX), puis exécutez:

 NPX TSC --NoEMIT

Cela vérifie les types sans générer de sortie. Corrigez toutes les erreurs qui apparaissent.

? Conseil de pro: utilisez d'abord les commentaires JSDOC dans les fichiers .js pour obtenir une meilleure inférence de type. TypeScript peut comprendre des types comme:

 / **
 * @param {String} Nom
 * @returns {numéro}
 * /
fonction getNameLength (name) {
  return name.length;
}

Cela aide pendant la transition et améliore la saisie semi-automatique.

3. Appliquer progressivement la sécurité de type

Une fois la dactylographie en cours d'exécution, augmentez la rigueur avec le temps.

Mettez à jour tsconfig.json pour assumer plus de problèmes:

 "Noimplicitany": vrai,
"strictnullchecks": vrai,
"Noimplicitreturns": vrai,
"nofallthroughcasesinswitch": vrai

Corrigez une règle à la fois. Par exemple:

• Commencez avec noImplicitAny → Ajouter des types où il leur manque.
• Activez ensuite strictNullChecks → Gire les cas null / undefined .

Utilisez // @ts-ignore avec parcimonie - et ajoutez toujours un commentaire expliquant pourquoi:

 // @ ts-ingnore: Ignorer temporaire jusqu'à ce que la réponse API soit tapée
const data = réponse.data.users;

Mieux encore, utilisez // @ts-expect-error si vous prévoyez de le réparer plus tard.

4. Gérer les bibliothèques tierces

De nombreux packages NPM ont un support de typeScript intégré ou des types de maintenance à la communauté.

Installez les types lorsque cela est disponible:

 NPM Install @ Types / React @ Types / Express @ Types / Lodash --Save-Dev

Si les types n'existent pas:

• Créez une cale dans types/ dossier:

   // Types / My-Library.d.ts
  Déclarer le module 'ma bibliothèque' {
    Const Valeur: tout;
    Exporter la valeur par défaut;
  }

• Référencez-le dans tsconfig.json :

   "Typeroots": ["node_modules / @ types", "types"]

5. Intégrer à votre outil de construction

Mettez à jour vos scripts de construction pour exécuter TypeScript.

Par exemple, dans package.json :

 "scripts": {
  "build": "tsc",
  "dev": "tsc - watch"
}

Si vous utilisez Babel (par exemple, dans Create React App), vous pouvez laisser Babel gérer TypeScript (mais vous avez toujours besoin tsc --noEmit pour la vérification de type dans CI).

Ajoutez un script de vérification de type:

 "scripts": {
  "Type-Check": "TSC --NoEMIT",
  "Type-Check: watch": "tsc --noemit - watch"
}

Exécutez-le dans votre pipeline CI pour éviter les régressions de type.

6. Refactor étape par étape

Lorsque vous convertissez des fichiers:

• Renommer .js → .ts
• Ajouter des interfaces pour les formes d'objets
• Remplacez any par des types spécifiques lorsque cela est possible

Exemple:

 // avant (dans .js avec jsdoc ou implicite)
fonction createUser (user) {
  return {id: 1, ... utilisateur};
}

// Après
interface utilisateur {
  Nom: String;
  Email: chaîne;
}

fonction createUser (utilisateur: utilisateur): utilisateur & {id: numéro} {
  return {id: 1, ... utilisateur};
}

Utilisez interface ou type en fonction des préférences:

• interface est extensible et bonne pour les formes d'objets.
• type est plus flexible (syndicats, primitives, etc.).

7. Formez votre équipe et mettez à jour les outils

• Ajouter un libellé de type avec Eslint:

   NPM Install Eslint @ TypeScript-eslint / Parser @ TypeScript-eslint / Eslint-Plugin --Save-dev

• Configurez .eslintrc pour prendre en charge la syntaxe TypeScript et les meilleures pratiques.
• Configurer la prise en charge de l'éditeur (VS Code fonctionne très bien hors de la boîte).
• Partagez des modèles communs dans votre équipe (par exemple, comment taper des accessoires React, Redux, etc.).

---

Réflexions finales

La migration dactylographiée est un voyage - pas un événement ponctuel. La clé est:

• Commencer petit
• Gardez l'application en cours d'exécution
• Améliorer progressivement la couverture de type
• Utilisez des outils pour attraper les erreurs tôt

Vous n'avez pas besoin de 100% dactylographié pour bénéficier d'une adoption de 20%. Même la dactylographie partielle attrape des bugs avant d'atteindre la production.

Fondamentalement, commencez simplement - et continuez d'avancer.

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!