Cómo migrar de Javascript a Typescript usando la herramienta ts-migrate

May 01 2023
¡Mecanografiado (TS) es increíble! Hace que el código sea más claro, fácil de mantener y evita errores comunes. Decidiste que es la mejor opción para tu equipo y ahora quieres adoptarla.

¡Mecanografiado (TS) es increíble! Hace que el código sea más claro, fácil de mantener y evita errores comunes. Decidiste que es la mejor opción para tu equipo y ahora quieres adoptarla. ¡Hurra!

Ups… No es tan fácil como parece adoptar TS . Es muy tedioso y requiere mucho tiempo. Entonces, ¿cómo migrar de JS a TS? ¡Con Chat GPT! Aún no .
Pero usar ts-migrate puede facilitar el trabajo .

Acerca de ts-migrate

ts-migrate es una herramienta para ayudar a migrar código a TypeScript. Toma un proyecto de JavaScript (JS), o un TypeScript parcial, y proporciona un proyecto de compilación de TypeScript.

Utilizamos ts-migrate para convertir 1000 archivos en nuestro proyecto de JS a TS. Nos ahorró un tiempo precioso e hizo que el proceso fuera muy conveniente.

Instalación y configuración de TS

Antes de iniciar el proceso de migración, debemos instalar y configurar TS:

  • Instale el paquete TS:
  • npm install typescript --save-dev
    

    npx tsc --init
    

    npm install --save-dev @types/react
    

Usaremos ts-migrate para migrar nuestros archivos JS a TS:

  • Instale ts-migrar:
  • npm install --save-dev ts-migrate
    

    yarn ts-migrate rename <project-dir> --sources <specific-dir>
    

    yarn ts-migrate migrate <project-dir> --sources <specific-dir>/file.tsx
    

Ejemplo

Creé este proyecto ts-migrate-example para demostrar un proceso de migración. Clónalo en tu máquina:

git clone https://github.com/shai20099/ts-migrate-example.git

yarn ts-migrate rename ./ --sources ./src/examples

Nuestro siguiente paso es aplicar el script de migración al archivo de ejemplo:

yarn ts-migrate migrate ./ --sources ./src/examples/example.ts

ts-migrate detecta que intentamos asignar una cadena a una variable numérica
ts-migrate advierte que intentamos reasignar un valor a una variable constante
ts-migrate agregando cualquier tipo donde no está declarado
ts-migrate declarando propiedades faltantes a una clase

Nota: Cuando ts-migrate no puede corregir automáticamente los problemas de TS, deja un comentario @ts-expect-error con los detalles del error.

Nota: Si bien ts-migrate coloca tipos en las variables donde es necesario, aún debemos recordar cambiar los tipos de cualquier tipo a los tipos específicos.

Nota: ts-migrate usa complementos para realizar cambios automáticamente. Puede hacer que realice más acciones automáticamente creando complementos personalizados para su proyecto. Más detalles están aquí .

Resumen

ts-migrate es una herramienta para ayudar a migrar código de JS a TS. Su objetivo principal es crear un código compilado y también corrige algunos errores automáticamente mediante el uso de complementos. Aunque ts-migrate no es una herramienta completamente automatizada, la encontramos muy útil ya que detecta brechas entre JS y TS, corrige lo que puede y marca el código que debe corregirse manualmente. Esto ahorra mucho tiempo en el proceso de migración, especialmente cuando tiene muchos archivos para migrar.

¡Buena suerte!