Como migrar de Javascript para Typescript usando a ferramenta ts-migrate

May 01 2023
Typescript (TS) é incrível! Ele torna o código mais claro, fácil de manter e evita erros comuns. Você decidiu que é a melhor escolha para sua equipe e agora quer adotá-la.

Typescript (TS) é incrível! Ele torna o código mais claro, fácil de manter e evita erros comuns. Você decidiu que é a melhor escolha para sua equipe e agora quer adotá-la. Viva!

Ops… Não é tão fácil quanto parece adotar o TS . É muito tedioso e demorado. Então, como migrar de JS para TS? Com Bate-papo GPT! Ainda não .
Mas usar o ts-migrate pode facilitar o trabalho .

Sobre o ts-migrate

ts-migrate é uma ferramenta para ajudar a migrar o código para TypeScript. Ele recebe um projeto JavaScript (JS) ou um TypeScript parcial e fornece um projeto TypeScript de compilação.

Usamos ts-migrate para converter 1.000 arquivos em nosso projeto de JS para TS. Isso nos poupou um tempo precioso e tornou o processo muito conveniente.

Instalando e Configurando o TS

Antes de iniciar o processo de migração, devemos instalar e configurar o TS:

  • Instale o pacote TS:
  • npm install typescript --save-dev
    

    npx tsc --init
    

    npm install --save-dev @types/react
    

Usaremos o ts-migrate para migrar nossos arquivos JS para o TS:

  • Instale o ts-migrate:
  • 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
    

Exemplo

Eu criei este projeto ts-migrate-example para demonstrar um processo de migração. Clone-o em sua máquina:

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

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

Nosso próximo passo é aplicar o script de migração ao arquivo de exemplo:

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

ts-migrate detecta que tentamos atribuir uma string a uma variável numérica
ts-migrate avisa que tentamos reatribuir um valor a uma variável constante
ts-migrate adicionando qualquer tipo onde não é declarado
ts-migrate declarando propriedades ausentes para uma classe

Nota: Onde ts-migrate não pode corrigir automaticamente os problemas de TS, ele deixa um comentário @ts-expect-error com os detalhes do erro.

Observação: embora ts-migrate coloque tipos em variáveis ​​quando necessário, ainda precisamos nos lembrar de alterar qualquer tipo para tipo específico.

Observação: o ts-migrate usa plug-ins para fazer alterações automaticamente. Você pode fazer com que ele execute mais ações automaticamente criando plug-ins personalizados para o seu projeto. Mais detalhes estão aqui .

Resumo

ts-migrate é uma ferramenta para ajudar a migrar o código de JS para TS. Seu principal objetivo é criar um código compilado e também corrige alguns erros automaticamente usando plugins. Embora ts-migrate não seja uma ferramenta totalmente automatizada, achamos muito útil, pois detecta lacunas entre JS para TS, corrige o que pode e marca o código que precisa ser corrigido manualmente. Isso economiza um tempo significativo no processo de migração, especialmente quando você tem muitos arquivos para migrar.

Boa sorte!