Réusinage de code legacy en TypeScript : guide étape par étape

Réfactorisation du code legacy en TypeScript : guide étape par étape

Travailler avec du code legacy est une partie inévitable de la vie de tout développeur, en particulier dans les grands projets. Souvent, ce code est écrit en JavaScript sans typage strict, regorge de chaînes "magiques", de fonctions obscures et d'un manque de modularité. Passer à TypeScript n'est pas simplement un changement de syntaxe, mais une opportunité d'améliorer considérablement l'architecture, la lisibilité et la maintenabilité du projet. Dans cet article, nous allons détailler une stratégie éprouvée de refactorisation du code legacy en TypeScript, qui minimise les risques et apporte un maximum de bénéfices.

Pourquoi TypeScript est-il idéal pour la refactorisation du code legacy ?

TypeScript offre des capacités uniques pour une refactorisation sécurisée :

• Typage statique : Permet de détecter les erreurs à la compilation, et non à l'exécution.
• Documentation automatique : Les types servent de documentation vivante, expliquant quelles données une fonction attend.
• Navigation et autocomplétion améliorées : L'IDE (VS Code, WebStorm) comprend la structure du code, ce qui accélère le développement.
• Refactorisations sécurisées : Renommer des variables ou modifier des signatures de fonctions se fait en toute confiance, sans rien casser.
• Adoption progressive : TypeScript peut être ajouté au projet fichier par fichier, sans tout réécrire d'un coup.

Étape 1 : Préparation et configuration de l'environnement

Avant de toucher au code, il est nécessaire de préparer l'infrastructure. Sans elle, la refactorisation se transformera en chaos.

1. Assurez-vous d'avoir des tests. C'est la règle la plus importante de la refactorisation. S'il n'y a pas de tests, écrivez au moins des tests d'intégration pour les modules clés. Sans tests, vous risquez de casser des fonctionnalités qui fonctionnent.
2. Configurez TypeScript. Installez typescript et créez tsconfig.json.
3. Activez les vérifications strictes. Dans tsconfig.json, ajoutez impérativement "strict": true. Cela active strictNullChecks, noImplicitAny et d'autres options utiles.

Exemple de tsconfig.json minimal :

{  "compilerOptions": {    "target": "ES2020",    "module": "commonjs",    "strict": true,    "esModuleInterop": true,    "skipLibCheck": true,    "outDir": "./dist"  },  "include": ["src/**/*"]}

4. Configurez le linter et le formateur. ESLint avec le plugin pour TypeScript (@typescript-eslint) et Prettier aideront à maintenir un style de code uniforme.

Étape 2 : Migration progressive de JavaScript vers TypeScript

N'essayez pas de réécrire tout le projet en un jour. Utilisez la stratégie "fichier par fichier".

Algorithme d'action :

• Renommez le fichier legacyModule.js en legacyModule.ts.
• Ajoutez des types pour les fonctions exportées et importées.
• Utilisez any temporairement si vous n'êtes pas sûr du type. Marquez ces endroits avec un commentaire // TODO: fix type.
• Exécutez les tests et vérifiez que tout fonctionne.

Exemple : Supposons que nous ayons une fonction legacy en JavaScript :

// oldModule.jsfunction calculateDiscount(price, customerType) {    if (customerType === 'vip') {        return price * 0.8;    }    return price * 0.95;}

Après la refactorisation en TypeScript :

// oldModule.tstype CustomerType = 'regular' | 'vip';

function calculateDiscount(price: number, customerType: CustomerType): number {    if (customerType === 'vip') {        return price * 0.8;    }    return price * 0.95;}

Le type CustomerType rend le code auto-documenté.