Réusinage de code legacy en TypeScript : de A à Z

Introduction : pourquoi le réusinage de code legacy n'est pas un luxe, mais une nécessité

Dans le développement web moderne, TypeScript est devenu le standard de facto pour les grands projets. Cependant, de nombreuses entreprises et startups sont confrontées à un problème : la base de code, écrite en JavaScript pur ou dans des versions anciennes et non strictes de TypeScript, se transforme avec le temps en « marécage ». L'absence de types, les fonctions gonflées, les dépendances implicites et les modèles obsolètes ralentissent le développement et augmentent le nombre de bogues.

Le réusinage de code legacy est le processus d'amélioration de la structure interne d'un programme sans modifier son comportement externe. Dans le contexte de TypeScript, il prend une valeur particulière : nous ne nettoyons pas seulement le code, mais nous obtenons également un puissant système de typage qui prévient les erreurs au moment de la compilation. Dans cet article, nous allons détailler un plan de réusinage étape par étape, de l'analyse initiale aux tests finaux, avec des exemples concrets en TypeScript.

1. Analyse et inventaire : par où commencer ?

La première et la plus importante étape est de comprendre à quoi nous avons affaire. On ne peut pas simplement tout réécrire d'un coup. C'est le chemin vers le chaos et la perte de temps. La bonne approche est de réaliser un audit de la base de code.

\n
• Identifiez les « points chauds ». Trouvez les modules qui sont le plus souvent modifiés ou qui contiennent le plus de bogues. Utilisez des outils comme git log ou SonarQube.
\n
• Repérez les types implicites. Dans le code JS legacy, on trouve souvent des fonctions qui acceptent any ou utilisent @ts-ignore. Dressez une liste de ces endroits.
\n
• Vérifiez les dépendances. Les bibliothèques obsolètes (par exemple, lodash 3.x) peuvent entraver la transition vers les API modernes de TypeScript.
\n
• Écrivez des tests. Avant tout réusinage, couvrez les parties clés du code avec des tests. C'est votre « filet de sécurité ».
\n

Exemple : vous avez une fonction en JS qui traite les données d'un utilisateur. Au lieu de la réécrire immédiatement, ajoutez des tests unitaires avec Jest ou Vitest :

// legacy.js\nfunction processUser(data) {\n    return { name: data.name, age: data.age + 1 };\n}\n\n// test.js\nimport { processUser } from './legacy';\ntest('processUser increments age', () => {\n    expect(processUser({ name: 'Alice', age: 30 })).toEqual({ name: 'Alice', age: 31 });\n});\n

Ce n'est qu'après cela que vous pouvez commencer le réusinage.

2. Migration progressive vers un typage strict

TypeScript propose plusieurs niveaux de rigueur. Pour le code legacy, il est recommandé de commencer avec "strict": false et d'augmenter progressivement le niveau. Activer toutes les options d'un coup pourrait casser des centaines de fichiers.

Étapes clés :

\n
• Activez noImplicitAny. Cela vous obligera à spécifier explicitement les types pour tous les paramètres et valeurs de retour. Cela peut être douloureux au début, mais c'est ainsi que vous trouverez les endroits les plus dangereux.
\n
• Utilisez strictNullChecks. L'une des principales causes de bogues est null et undefined. Ce drapeau vous obligera à les traiter explicitement.
\n
• Ajoutez noUnusedLocals et noUnusedParameters. Ils aideront à supprimer le code mort.
\n

Exemple de réusinage d'une fonction avec des types implicites :

// Avant le réusinage (JS legacy)\nfunction calculateTotal(price, tax) {\n    return price + (price * tax);\n}\n\n// Après le réusinage (TypeScript)\ninterface PriceData {\n    price: number;\n    tax: number;\n}\n\nfunction calculateTotal({ price, tax }: PriceData): number {\n    if (price < 0 || tax < 0) {\n        throw new Error('Price and tax must be non-negative');\n    }\n    return price + (price * tax);\n}\n

Notez : nous n'avons pas seulement ajouté des types, mais nous avons également rendu l'API plus sûre en utilisant une interface et une validation.

3. Élimination des anti-patrons et des éléments obsolètes