Refatoração de código legado em TypeScript: guia passo a passo

Refatoração de código legado para TypeScript: um guia passo a passo

Trabalhar com código legado é uma parte inevitável da vida de qualquer desenvolvedor, especialmente em projetos grandes. Frequentemente, esse código é escrito em JavaScript sem tipagem estrita, repleto de strings "mágicas", funções obscuras e falta de modularidade. A migração para TypeScript não é apenas uma mudança de sintaxe, mas uma oportunidade de melhorar significativamente a arquitetura, legibilidade e capacidade de manutenção do projeto. Neste artigo, vamos analisar uma estratégia comprovada de refatoração de código legado para TypeScript que minimiza riscos e traz o máximo de benefícios.

Por que o TypeScript é ideal para refatorar código legado?

O TypeScript oferece recursos únicos para refatoração segura:

• Tipagem estática: Permite identificar erros em tempo de compilação, não em tempo de execução.
• Documentação automática: Os tipos servem como documentação viva, explicando quais dados uma função espera.
• Navegação e autocompletar aprimorados: A IDE (VS Code, WebStorm) entende a estrutura do código, acelerando o desenvolvimento.
• Refatorações seguras: Renomear variáveis ou alterar assinaturas de funções é feito com a confiança de que nada será quebrado.
• Adoção gradual: O TypeScript pode ser adicionado ao projeto arquivo por arquivo, sem reescrever tudo de uma vez.

Passo 1: Preparação e configuração do ambiente

Antes de tocar no código, é necessário preparar a infraestrutura. Sem ela, a refatoração se tornará um caos.

1. Certifique-se de que você tem testes. Esta é a regra mais importante da refatoração. Se não houver testes — escreva pelo menos testes de integração para os módulos principais. Sem testes, você corre o risco de quebrar funcionalidades existentes.
2. Configure o TypeScript. Instale o typescript e crie o tsconfig.json.
3. Ative verificações rigorosas. No tsconfig.json, adicione obrigatoriamente "strict": true. Isso ativa strictNullChecks, noImplicitAny e outras opções úteis.

Exemplo de tsconfig.json mínimo:

{  "compilerOptions": {    "target": "ES2020",    "module": "commonjs",    "strict": true,    "esModuleInterop": true,    "skipLibCheck": true,    "outDir": "./dist"  },  "include": ["src/**/*"]}

4. Configure o linter e o formatador. ESLint com o plugin para TypeScript (@typescript-eslint) e Prettier ajudarão a manter um estilo de código consistente.

Passo 2: Migração gradual de JavaScript para TypeScript

Não tente reescrever todo o projeto em um dia. Use a estratégia "arquivo por arquivo".

Algoritmo de ação:

• Renomeie o arquivo legacyModule.js para legacyModule.ts.
• Adicione tipos para as funções exportadas e importadas.
• Use any temporariamente se não tiver certeza sobre o tipo. Marque esses locais com um comentário // TODO: fix type.
• Execute os testes e verifique se tudo funciona.

Exemplo: Suponha que temos uma função legada em JavaScript:

// oldModule.jsfunction calculateDiscount(price, customerType) {    if (customerType === 'vip') {        return price * 0.8;    }    return price * 0.95;}

Após a refatoração para TypeScript:

// oldModule.tstype CustomerType = 'regular' | 'vip';

function calculateDiscount(price: number, customerType: CustomerType): number {    if (customerType === 'vip') {        return price * 0.8;    }    return price * 0.95;}

O tipo CustomerType torna o código autodocumentado.