Cómo pasar de JavaScript a TypeScript con ejemplos prácticos

TypeScript se ha convertido en una herramienta fundamental para desarrollar aplicaciones modernas con JavaScript, especialmente en proyectos con React y Next.js. Su principal ventaja es que añade un sistema de tipos que permite detectar errores antes de ejecutar el código.

1. ¿Qué cambia entre JavaScript y TypeScript?

JavaScript permite trabajar con variables sin declarar previamente qué tipo de dato contienen. TypeScript, en cambio, permite definir si una variable será un número, texto, booleano u otro tipo de dato.

Por ejemplo, en JavaScript podemos escribir:

let nombre = "Carlos";
let edad = 25;

En TypeScript podemos hacerlo así:

let nombre: string = "Carlos";
let edad: number = 25;

La diferencia está en las anotaciones de tipo. Si intentamos asignar un texto a edad, TypeScript detectará el problema durante la comprobación del código.

2. Convertir funciones a TypeScript

Las funciones también pueden beneficiarse de los tipos. En JavaScript tenemos:

function sumar(a, b) {
  return a + b;
}

En TypeScript podemos definir los parámetros y el resultado:

function sumar(a: number, b: number): number {
  return a + b;
}

Ahora la función solo acepta números y devuelve un número. Esto facilita el mantenimiento del código y evita errores cuando otros desarrolladores utilizan la función.

3. Trabajar con objetos y tipos personalizados

En aplicaciones reales es común manejar usuarios, productos o pedidos. TypeScript permite definir la estructura de estos datos mediante interface.

interface Usuario {
  nombre: string;
  correo: string;
  activo: boolean;
}

const usuario: Usuario = {
  nombre: "Laura",
  correo: "laura@email.com",
  activo: true
};

Si olvidamos una propiedad obligatoria o asignamos un tipo incorrecto, TypeScript mostrará un error. Así podemos trabajar con datos más predecibles.

4. ¿Cómo migrar un proyecto existente?

No es necesario convertir toda una aplicación de inmediato. Una estrategia práctica consiste en:

1. Instalar TypeScript con npm install -D typescript.
2. Renombrar archivos .js a .ts y, en proyectos React, .jsx a .tsx.
3. Configurar TypeScript mediante npx tsc --init.
4. Añadir tipos a las funciones, variables y objetos.
5. Corregir los errores gradualmente y activar opciones más estrictas conforme avance la migración.

En proyectos React y Next.js también es importante tipar las propiedades de los componentes y las respuestas de las API.

5. ¿Vale la pena aprender TypeScript?

Sí. Aunque al principio requiere acostumbrarse a escribir tipos, TypeScript mejora el autocompletado del editor, facilita la refactorización y ayuda a detectar errores comunes antes de ejecutar una aplicación.

La mejor forma de aprenderlo es migrar pequeños proyectos de JavaScript, comenzando por funciones y objetos, y avanzar después hacia componentes, formularios y conexiones con API.

Pasar de JavaScript a TypeScript no significa abandonar JavaScript, sino añadir herramientas para escribir código más seguro, organizado y fácil de mantener. Es una habilidad especialmente útil para quienes buscan desarrollar aplicaciones profesionales con React y Next.js.