Cómo migrar tu app React a TypeScript

Migrar una aplicación de React de JavaScript a TypeScript es más sencillo de lo que parece cuando el proyecto ya funciona. Aquí aprenderás qué cambios aplicar para sumar tipado y hacer tu código mucho más seguro, ideal para desarrolladores que ya construyeron su primera app en React y quieren dar el salto a un código más mantenible.

La idea no es rehacer todo desde cero. El proyecto ya está construido con React y JavaScript, y ahora el foco está en entender qué transformaciones necesita para tipar props, estados y funciones.

Por qué migrar de JavaScript a TypeScript en un proyecto React

Desde la perspectiva de producto, la respuesta es clara: mantener una aplicación en JavaScript demanda más tiempo para mantener, depurar y solucionar bugs. Si tu proyecto crece y necesita más desarrolladores, TypeScript acelera ese trabajo porque identifica los posibles errores mucho más rápido.

La diferencia entre ambos lenguajes marca la decisión:

• JavaScript es más flexible y requiere menos configuración inicial, pero los errores de tipo aparecen en tiempo de ejecución o cuando buildeas la aplicación.
• TypeScript agrega tipos al código y detecta errores antes de ejecutar.
• TypeScript documenta mejor la estructura de datos y ayuda al editor con autocompletado y validaciones.

Y aquí viene lo interesante: no tienes que hacerlo a ciegas. Puedes apoyarte en inteligencia artificial para diseñar la estrategia de migración [00:33].

¿TypeScript reemplaza a JavaScript? No. TypeScript es una capa que agrega tipado sobre JavaScript. Detecta errores antes de ejecutar el código y todo lo que escribes sigue siendo JavaScript por debajo.

Cómo usar inteligencia artificial para planear la migración

Antes de tocar el código, conviene pedirle a una IA que revise el proyecto y proponga un plan. En la clase se usó una herramienta llamada Devin en modo plan, con la instrucción directa: dame la recomendación para migrar esta aplicación a TypeScript [01:34].

El análisis reveló datos concretos del proyecto:

• Es una SPA construida con Vite y React 19.
• Ya tiene instaladas las dependencias de tipos para React y React DOM.
• Solo falta instalar TypeScript y ts-node, agregar el archivo tsconfig.json y tipar los nueve archivos fuente.

El plan también indicó renombrar los archivos y convertir la configuración de Vite a extensión TypeScript. Lo importante: puedes usar cualquier editor o IA y tomar la decisión según las recomendaciones que recibas [02:56].

¿Qué es una SPA? Es una Single Page Application, una aplicación web que carga una sola página y actualiza el contenido dinámicamente sin recargar el navegador completo.

Qué archivos cambian al pasar de JSX a TSX

El primer paso técnico es cambiar la extensión de los archivos de JSX a TSX [03:30]. Un detalle visual ayuda a confirmar el cambio: el icono de JavaScript es un azul muy claro y el de TypeScript es un azul un poco más oscuro. Ese cambio de color indica que el archivo ya se comporta como TypeScript.

Después de renombrar, algunos archivos quedan en verde y otros en rojo. Los que están en rojo detectan algún error [04:20].

• El componente Header queda en verde porque no recibe datos dinámicos.
• El componente PropertyCard queda en rojo porque recibe props sin tener especificado el tipo de dato de cada valor.

Ahí es donde entra el concepto central de esta migración: los types.

Cómo crear tu primer type en TypeScript

Un type define qué tipo de dato recibe cada valor. Para crearlo, fuera de la carpeta de componentes y dentro de src, se crea una carpeta llamada Types y dentro un archivo PropertyType.ts [04:55].

Para definir los tipos correctos, revisas tu archivo de datos y determinas qué es cada campo:

• El ID es un número (number).
• El título, la ubicación, la imagen y el tipo son texto (string).
• El precio es un número (number).

El type se exporta con esta estructura:

typescript export type Property = { id: number; title: string; location: string; price: number; image: string; type: string; };

Cómo importar y aplicar el type en un componente

Una vez creado el type, lo importas en PropertyCard. El propio editor lo recomienda automáticamente y sugiere la ruta del archivo [06:16]. Luego, a las props que antes estaban sin definir, les agregas los dos puntos y el tipo que van a tener.

Con esto, el nombre del archivo pasa de rojo a verde porque ya no tiene errores. Y aquí está el beneficio real: si le pasas un precio como texto en lugar de número, TypeScript lanza un error de inmediato. No tienes que esperar a que la aplicación se despliegue o esté buildeando para descubrir el fallo [06:54].

Por qué necesitas el archivo tsconfig.json

El tsconfig.json es el archivo que contiene todas las configuraciones de TypeScript [07:38]. Sin él, el proyecto no sabe cómo interpretar el tipado. En la clase se agregaron las configuraciones mínimas recomendadas para la extensión de la aplicación.

Si quieres entender cada opción de configuración, la referencia oficial de TypeScript explica cada sección que puedes agregar para ajustar el comportamiento.

Hasta aquí ya cambiaste extensiones, agregaste la configuración inicial y creaste tu primer type. El siguiente paso es completar la actualización tipando props, eventos, estados y funciones.

¿Ya empezaste a migrar tu proyecto a TypeScript? Cuéntanos en los comentarios con qué componente comenzaste y qué errores te ayudó a detectar el tipado.