O que é TypeScript? Um guia simples para não programadores

TypeScript é JavaScript com tipos. Você adiciona rótulos dizendo que tipo de dado cada valor deve ser — um número, um texto, uma lista de pedidos — e o TypeScript verifica o seu código para encontrar incompatibilidades antes de ele rodar. O site do TypeScript o descreve como “JavaScript com sintaxe para tipos”; os tipos são retirados quando o código é convertido em JavaScript comum, que então roda em qualquer lugar onde o JavaScript roda.

Por que isso importa ao criar com IA

Modelos de IA escrevem código rápido, e código rápido tem erros: um campo chamado customerName em um arquivo e customer_name em outro, um preço passado como texto em vez de número, uma função chamada com um valor faltando. Em JavaScript puro, muitos desses erros só aparecem quando alguém clica no botão errado.

O TypeScript pega muitos deles mais cedo, enquanto o código está sendo escrito:

• A IA recebe retorno instantâneo. Os erros de tipo apontam para a linha exata que está errada, então o agente pode corrigi-la antes de você ver.
• As mudanças ficam mais seguras. Renomeie um campo, e o TypeScript sinaliza todo lugar que ainda usa o nome antigo.
• O código se explica sozinho. Os tipos documentam o que uma função espera e o que devolve, o que ajuda você, a IA e qualquer desenvolvedor que trabalhe nele depois.
• Os editores ficam mais inteligentes. Autocompletar e “ir para a definição” funcionam melhor porque o editor sabe o que cada valor é.

Esse é um grande motivo pelo qual muitos criadores de apps com IA usam TypeScript por padrão.

Uma analogia do dia a dia

Pense em um armazém de logística com baias identificadas. Cada baia tem uma placa: “Somente paletes”, “Refrigerado”, “Máximo 500 kg”. Quando uma entrega chega, um conferente na porta compara a mercadoria com a placa. Peixe congelado destinado à baia de secos é barrado na porta, e não descoberto uma semana depois, quando já está estragado.

O TypeScript é o conferente na porta. Os tipos são as placas. A verificação acontece antes de a mercadoria — o seu código — entrar em uso. E, quando tudo está no lugar, as placas são retiradas: o JavaScript em execução não tem mais tipos.

Como o TypeScript funciona

1. Você (ou a IA) escreve arquivos .ts ou .tsx — TypeScript, com rótulos de tipo.
2. O verificador de tipos lê o código e informa as incompatibilidades como erros no editor ou no build.
3. Uma etapa de build remove os tipos, gerando JavaScript puro.
4. O JavaScript roda no navegador ou em um servidor (Node.js, Deno, Bun).

Uma consequência importante: o TypeScript verifica o código que você escreveu, e não os dados que chegam enquanto o app está rodando. Se uma API externa devolver algo inesperado, o TypeScript não consegue ver isso, a menos que você adicione validação em tempo de execução.

Um exemplo prático: um formulário de agendamento

Suponha que você está construindo um app de agendamento para um salão de cabeleireiro. Aqui está um tipo que descreve um agendamento:

type Booking = {
  id: number;
  customerEmail: string;
  service: "haircut" | "colour" | "blow-dry";
  startsAt: Date;
  price: number;
  notes?: string; // o ? significa opcional
};

E uma função que calcula um sinal:

function depositFor(booking: Booking): number {
  return booking.price * 0.2;
}

Agora veja o que o TypeScript pega.

Um campo escrito errado.

depositFor({ id: 1, customerEmail: "lena@example.com", service: "haircut",
  startsAt: new Date(), prise: 40 });

O TypeScript informa que prise não é uma propriedade conhecida e que price está faltando. Em JavaScript puro, isso calcularia silenciosamente um sinal de NaN (não é um número).

O tipo de valor errado.

const booking: Booking = { ...otherFields, price: "40" };

O TypeScript informa que um texto não pode ser usado onde se espera um número. Sem ele, "40" * 0.2 até funciona, mas "40" + 5 dá "405" — o tipo de bug que aparece em uma fatura.

Um serviço que não existe.

const booking: Booking = { ...otherFields, service: "perm" };

O TypeScript informa que "perm" não é um dos serviços permitidos. Quando o salão depois adicionar permanentes, você inclui isso no tipo, e o TypeScript mostra todos os lugares que precisam ser atualizados — a tabela de preços, o formulário, as cores da agenda.

O que ele não consegue pegar. Se o formulário de agendamento enviar price: "40" do navegador para o servidor, o TypeScript do servidor não vê isso em tempo de execução. Por isso, apps bem construídos também validam os dados recebidos, muitas vezes com uma biblioteca de validação que confere a estrutura e a transforma em um Booking válido.

TypeScript vs JavaScript

Termos comuns explicados

Erros comuns e equívocos

• “TypeScript deixa o código livre de bugs.” Ele pega incompatibilidades na forma dos dados, não erros de lógica. Um sinal de 2% em vez de 20% passa na verificação de tipos sem problema.
• “Os tipos me protegem de entradas ruins.” Os tipos desaparecem em tempo de execução. Valide os dados vindos de usuários, formulários e APIs.
• any em todo lugar. Quando uma IA trava, ela pode recorrer a any ou // @ts-ignore para silenciar os erros. Isso esconde problemas em vez de resolvê-los.
• Ignorar erros de tipo porque o preview funciona. Algumas ferramentas ainda rodam código com erros de tipo. Esses erros continuam sendo bugs esperando para acontecer.
• “TypeScript é mais lento.” Os tipos são removidos antes de rodar; o JavaScript que executa é essencialmente o mesmo.
• “É só para equipes grandes.” Criadores solo também se beneficiam, principalmente quando uma IA faz a maior parte das edições.

O que pedir ao seu criador com IA

• “Use TypeScript com o modo estrito ativado.”
• “Defina tipos compartilhados para nossos principais registros — Customer, Booking, Invoice — e use-os tanto no frontend quanto no backend.”
• “Não use any nem @ts-ignore para passar pelos erros; corrija o problema de base e me diga qual era.”
• “Valide todos os dados recebidos no servidor, não só com tipos.”
• “Rode o verificador de tipos e corrija todos os erros antes de me dizer que terminou.”
• “Quando renomear um campo, atualize todo lugar que o TypeScript sinalizar.”
• “Explique este erro de tipo em português simples.”

Para saber mais sobre como verificar o que a IA produziu, veja como revisar código gerado por IA e como depurar um app criado com IA.

TypeScript no Mythex

Quando você não pede nada específico, o Mythex inicia novos projetos com Vite + React + TypeScript + Tailwind. O editor de código inclui inteligência de linguagem — autocompletar, diagnósticos e ir para a definição para TypeScript e JavaScript, entre outras linguagens — então os erros de tipo ficam visíveis no código, e não apenas no preview. O editor é somente leitura no plano Free e totalmente editável no Pro. Você ainda pode pedir uma configuração diferente no seu primeiro prompt; a página da documentação sobre como a tecnologia é escolhida explica como, e a documentação do editor de código detalha o que o editor mostra.

Perguntas