programandoai

Migração honesta de JS para TS, e quem checa o quê

Ninguém reescreve um projeto inteiro do dia para a noite. A migração de verdade é arquivo por arquivo, com any temporário como uma dívida anotada, nunca esquecida.

Estudar esta lição interativa →

Um projeto de JavaScript com anos de vida e centenas de arquivos não vira TypeScript da noite para o dia, e tentar isso costuma sair pior do que não migrar nada: um "big bang" de reescrever tudo de uma vez trava o time por semanas e injeta bugs novos no meio do caminho. A migração que funciona na prática é incremental: um arquivo .js vira .ts de cada vez, o projeto continua rodando (e sendo publicado) o tempo inteiro, com arquivos .js e .ts convivendo lado a lado durante meses, às vezes anos.

É como reformar uma casa enquanto você continua morando nela: você não pode derrubar a casa inteira e reconstruir do zero, então reforma um cômodo de cada vez, mantendo o resto habitável. Um cômodo reformado (um arquivo .ts) já é mais seguro; o resto da casa (os arquivos .js ainda não migrados) continua funcionando exatamente como antes, esperando sua vez.

Durante essa transição, é comum precisar de um any pontual: uma função antiga, mal documentada, cujo formato real de dado ninguém tem certeza absoluta. Usar any ali, de propósito, para destravar a migração daquele arquivo sem travar tudo esperando entender cada detalhe, é uma decisão razoável. O que separa isso de simplesmente desistir (o problema do Módulo 2) é tratar esse any como uma dívida anotada, nunca como destino final:

// Migração em andamento: um any temporário, marcado como dívida, com plano de saída.
interface ItemCarrinho {
  preco: number;
  quantidade: number;
}

// TODO: any temporário, tipar depois de confirmar o formato com o backend
function calcularDesconto(item: any, percentual: number) {
  return item.preco * (percentual / 100);
}

function calcularSubtotal(item: ItemCarrinho) {
  return item.preco * item.quantidade;
}

console.log(calcularDesconto({ preco: 100 }, 10));
console.log(calcularSubtotal({ preco: 10, quantidade: 3 }));

O comentário TODO marca a dívida: um any temporário, com um plano de saída.

Uma dívida visível é uma dívida que se paga

Um any silencioso, sem nenhuma marcação, se esconde para sempre. Um comentário como // TODO: any temporário, tipar depois de confirmar o formato com o time de backend transforma a mesma dívida em algo rastreável: dá para buscar por "TODO: any temporário" no projeto inteiro e ver, de forma honesta, quanto ainda falta migrar.

Voltando ao Módulo 1: o navegador nunca executa TypeScript, só o JavaScript que sobra depois do apagamento de tipos. Essa mesma divisão, checagem de um lado, execução de outro, é literalmente a arquitetura por trás das células de código deste curso: dependendo de como você está acessando esta página, um motor completo de tipos roda de verdade por trás de cada célula marcada como TS, checando tudo com o compilador real; ou, quando esse motor completo não está disponível, uma versão simplificada só remove as anotações de tipo, sem checar nada, para o código continuar rodando de qualquer jeito. Em nenhum dos dois casos o navegador chega a executar uma linha sequer de sintaxe de tipo: o que roda, sempre, é puro JavaScript.

Nunca confie só na ausência de diagnóstico

Um diagnóstico verde (ou nenhum diagnóstico) significa "o compilador não encontrou uma inconsistência com o que foi anotado", não "este código está livre de bugs". Um any escondido, um tipo anotado errado de propósito, ou uma configuração mais frouxa do que o strict (como um tsconfig com o strict desligado) podem deixar um bug real passar despercebido pela checagem de tipos. Tipos ajudam bastante, mas não substituem testar o comportamento de verdade.

A função resumirPedido ainda está no meio da migração, com o parâmetro pedido: any marcado como dívida temporária. Crie a interface PedidoResumo (com cliente: string e total: number), troque any por ela no parâmetro, e remova o comentário TODO.
// TODO: any temporário, tipar depois de confirmar o formato com o backend
function resumirPedido(pedido: any) {
  return pedido.cliente + ": " + pedido.total;
}

console.log(resumirPedido({ cliente: "Ana", total: 129.9 }));

🧩 Este é um exercício com correção automática — abra no app para completá-lo e verificar.

← Voltar ao índice do curso