Refactorización de código legacy a TypeScript: guía paso a paso

Refactorización de código legacy a TypeScript: guía paso a paso

Trabajar con código legacy es una parte inevitable de la vida de cualquier desarrollador, especialmente en proyectos grandes. A menudo, dicho código está escrito en JavaScript sin tipado estricto, abunda en cadenas "mágicas", funciones confusas y falta de modularidad. La migración a TypeScript no es solo un cambio de sintaxis, sino una oportunidad para mejorar significativamente la arquitectura, la legibilidad y el mantenimiento del proyecto. En este artículo, analizaremos una estrategia probada para refactorizar código legacy a TypeScript que minimiza los riesgos y aporta el máximo beneficio.

¿Por qué TypeScript es ideal para refactorizar código legacy?

TypeScript ofrece capacidades únicas para una refactorización segura:

• Tipado estático: Permite detectar errores en la fase de compilación, no en tiempo de ejecución.
• Documentación automática: Los tipos sirven como documentación viva, explicando qué datos espera una función.
• Navegación y autocompletado mejorados: El IDE (VS Code, WebStorm) entiende la estructura del código, lo que acelera el desarrollo.
• Refactorizaciones seguras: Renombrar variables o cambiar firmas de funciones se realiza con la confianza de que nada se romperá.
• Adopción gradual: TypeScript se puede agregar a un proyecto archivo por archivo, sin tener que reescribir todo de una vez.

Paso 1: Preparación y configuración del entorno

Antes de tocar el código, es necesario preparar la infraestructura. Sin ella, la refactorización se convertirá en un caos.

1. Asegúrate de tener tests. Esta es la regla más importante de la refactorización. Si no hay tests, escribe al menos tests de integración para los módulos clave. Sin tests, corres el riesgo de romper funcionalidades que funcionan.
2. Configura TypeScript. Instala typescript y crea un tsconfig.json.
3. Activa las comprobaciones estrictas. En tsconfig.json, asegúrate de agregar "strict": true. Esto activa strictNullChecks, noImplicitAny y otras opciones útiles.

Ejemplo de un tsconfig.json mínimo:

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

4. Configura el linter y el formateador. ESLint con el plugin para TypeScript (@typescript-eslint) y Prettier ayudarán a mantener un estilo de código uniforme.

Paso 2: Migración gradual de JavaScript a TypeScript

No intentes reescribir todo el proyecto en un solo día. Utiliza la estrategia de "archivo por archivo".

Algoritmo de acción:

• Renombra el archivo legacyModule.js a legacyModule.ts.
• Agrega tipos para las funciones exportadas e importadas.
• Usa any temporalmente si no estás seguro del tipo. Marca esos lugares con un comentario // TODO: fix type.
• Ejecuta los tests y verifica que todo funcione.

Ejemplo: Supongamos que tenemos una función legacy en JavaScript:

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

Después de la refactorización a TypeScript:

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

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

El tipo CustomerType hace que el código sea autodocumentado.