Cómo migrar gradualmente tus Aplicaciones de JavaScript a TypeScript

TypeScript está ganando popularidad como alternativa a JavaScript con seguridad de tipos.

Aquí te explicamos cómo transformar gradualmente tu código JavaScript en TypeScript fuertemente tipado.

1. Configura el compilador de TypeScript

Instala TypeScript globalmente (o localmente):

npm install -g typescript

Opcionalmente, puedes usar runtimes como Bun o Deno, que ya soportan TypeScript de forma nativa.

2. Agrega un archivo de configuración tsconfig.json

Crea un archivo tsconfig.json en la raíz de tu proyecto para controlar la compilación:

{
  "compilerOptions": {
    "outDir": "./jssrc",     // Carpeta donde irán los archivos JS compilados
    "allowJs": true,         // Permite procesar archivos .js junto con .ts
    "target": "es6",         // Compilar a JavaScript ES6
    "sourceMap": true        // Genera mapas de código para depuración
  },
  "include": ["./src/**/*"]  // Archivos que se incluyen para compilar
}

Luego, ejecuta el compilador con:

tsc

3. Renombra los archivos JavaScript a .ts

Cambia la extensión de tus archivos .js a .ts poco a poco. Al principio, seguirán funcionando como JavaScript normal, pero ahora podrán usar las herramientas de TypeScript.

4. Agrega anotaciones de tipos poco a poco

Comienza añadiendo tipos en las firmas de funciones y variables:

interface Persona {
  firstName: string;
  lastName: string;
}

function apellidoPrimero(persona: Persona): string {
  return `${persona.lastName}, ${persona.firstName}`;
}

Usa interfaces o alias type para definir la forma de los objetos. Ejemplo de tipos unión e intersección:

type NombreCompleto = { firstName: string; lastName: string; };
type Autor = NombreCompleto & { books: string[] };

function imprimirNombre(nombre: NombreCompleto | string) {
  if (typeof nombre === 'string') {
    console.log(nombre);
  } else {
    console.log(`${nombre.firstName} ${nombre.lastName}`);
  }
}

5. Aprovecha la inferencia de tipos

Evita anotaciones redundantes en literales y asignaciones simples. Deja que TypeScript infiera tipos cuando sea posible para mantener el código limpio.

6. Maneja tipos especiales

Usa any para casos temporales donde no tengas un tipo definido. Usa null y undefined en uniones cuando aplique:

let nombrePosible: string | null = null;

Usa la afirmación de no-null (!) cuando estés seguro que un valor no es null:

elemento!.focus();

7. Firmas de funciones

Especifica tipos para funciones que recibes como parámetros:

function ejecutarFn(fn: (arg: number) => any, valor: number) {
   return fn(valor);
}

8. Integra con herramientas de construcción (build tools)

Muchos frameworks (Angular, NestJS, tsdx) tienen soporte integrado para TypeScript. Para webpack, instala ts-loader:

npm install --save-dev ts-loader

Configura webpack.config.js para procesar archivos .ts.

Consejos para una migración suave

• Migra archivo por archivo, no trates de reescribir todo de una vez.
• Usa "allowJs": true para que coexistan archivos JS y TS.
• Activa la opción strict poco a poco, empezando con configuraciones más relajadas.
• Añade tipos progresivamente, enfocándote primero en las partes clave.
• Usa el servidor de lenguaje de TypeScript en tu editor para obtener retroalimentación instantánea.