Cómo Devin AI migra componentes React a TypeScript

Migrar componentes de React a TypeScript deja de ser tedioso cuando tipas datos, props, funciones, eventos y estados con la ayuda de la inteligencia artificial. Si desarrollas en JavaScript y quieres proyectos más seguros y fáciles de mantener, esta es la parte donde todo cobra sentido.

Retomamos la migración que empezamos con Devin AI: en la clase anterior le pedimos que diseñara un plano o estrategia para pasar de JavaScript a TypeScript, y ahora revisamos componente por componente los cambios que nos entregó [00:14].

Qué cambia al tipar props en componentes de React

No todos los componentes cambian igual. El header, por ejemplo, no recibe ningún dato variable, así que no tiene modificaciones importantes [00:35]. El PropertyCart sí: ahora importa el type property desde un archivo externo y crea un type local llamado PropertyCartProps [00:48].

Aquí hay un detalle que vale oro y es el case de las palabras. property en minúscula es el nombre de la prop que recibes, y Property con mayúscula es el type que identificas en el archivo externo. Esa distinción evita confusiones [01:15].

¿Qué es un type local en TypeScript? Es una definición de tipo que creas dentro del mismo componente para describir la forma de sus props. Por ejemplo, PropertyCartProps agrupa las propiedades que ese componente espera recibir.

Un cambio que hizo Devin: el archivo que originalmente se llamaba propertyType ahora se llama simplemente property. Es más simple y tiene más lógica [01:25].

Cómo se tipa un array de objetos en las props

El PropertyList tiene un cambio muy especial. Sigue importando el mismo type property, pero en lugar de llamarlo solo, le agrega las llaves property[] para indicar que es un array de tipo property [01:49].

Todo el listado va a recibir múltiples objetos, pero todos del mismo tipo. Estos tipos locales para las props se suelen diseñar para usarlos directamente en el componente: mantienes la estructura original de properties, le agregas los dos puntos y defines el type localmente [02:12].

Cómo tipar eventos en formularios de React

El SearchBar tiene detalles importantes porque es un formulario, y los formularios manejan eventos. Aquí los eventos ya vienen tipados dentro de un type local llamado SearchBarProps [02:40].

Devin determinó que:

• El value es un string.
• El searchValue es un string.
• Los eventos se tipean de manera distinta usando tipos que vienen de React directamente.

En este caso se usan ChangeEvent y ComponentProps, que permiten trabajar los eventos de forma más sencilla [03:00]. En la sección de recursos encuentras un link a la documentación oficial de React con TypeScript, donde explican mejor el manejo de eventos [03:12].

¿Por qué usar ChangeEvent de React? Porque describe con precisión qué tipo de evento dispara un input o formulario, evitando que pases valores incorrectos y avisándote de errores antes de ejecutar la app.

Por qué TypeScript detecta errores antes de ejecutar la app

El archivo de data no necesita cambiar, pero sirve para una prueba reveladora. Al aplicar el type property, cada elemento debe respetar su estructura: un número, varios strings y otro número [03:30].

¿Qué pasa si cambias el price y en lugar de pasarlo como número lo pasas como string? Aquí está la magia: TypeScript marca un error indicando que ese valor no tiene el formato correcto [04:05]. Al volverlo número, el error desaparece.

Y aquí viene lo interesante. En JavaScript ese mismo error saltaría solo en ejecución o con la aplicación ya desplegada. Con TypeScript te ahorras:

• El tiempo de buildeo.
• El tiempo de despliegue.
• El tiempo de identificar cuál es el error.

Esa es una de las ventajas más concretas de tipar tu código desde el inicio [04:30].

Cómo tipar estados con useState en TypeScript

El archivo principal App.tsx importa el type property y lo usa en dos estados. Uno recibe un array de tipo property, y el otro, el del error, puede recibir un string o ser nulo [04:55].

Cualquier valor distinto a string o nulo dispara un error. Si cambias ese estado a número, TypeScript lo marca. Pero si lo pasas como "número" entre comillas, lo interpreta como string y lo acepta [05:15]. El resto del archivo se mantiene igual: solo se definió qué type recibe cada estado.

Con esto completamos la migración: tipamos datos, props, funciones, eventos y estados. La funcionalidad sigue siendo la misma, pero ahora el proyecto es más seguro, más explícito y más fácil de mantener [05:40].

¿Ya intentaste migrar alguno de tus proyectos con ayuda de IA? Cuéntame en los comentarios cómo te fue y nos vemos en el entregable final de la siguiente clase.