O que é o TypeScript? Guia simples para não programadores

O TypeScript é JavaScript com tipos. Acrescenta etiquetas que indicam que tipo de dados deve ter cada valor — um número, um texto, uma lista de encomendas — e o TypeScript verifica o seu código à procura de incoerências antes de alguma vez ser executado. O site do TypeScript descreve-o como "JavaScript com sintaxe para tipos"; os tipos são retirados quando o código é convertido em JavaScript normal, que depois corre em qualquer lugar onde corre o JavaScript.

Porque é que importa quando se cria com IA

Os modelos de IA escrevem código depressa, e código rápido tem erros: um campo chamado customerName num ficheiro e customer_name noutro, um preço passado como texto em vez de número, uma função chamada com um valor em falta. Em JavaScript simples, muitos desses erros só aparecem quando alguém clica no botão errado.

O TypeScript apanha muitos deles mais cedo, enquanto o código está a ser escrito:

• A IA recebe feedback imediato. Os erros de tipo apontam para a linha exata que está errada, para que o agente a corrija antes de a ver.
• As alterações são mais seguras. Se mudar o nome de um campo, o TypeScript assinala cada sítio que ainda usa o nome antigo.
• O código explica-se a si próprio. Os tipos documentam o que uma função espera e devolve, o que ajuda você, a IA e qualquer programador que trabalhe no código mais tarde.
• Os editores ficam mais inteligentes. O preenchimento automático e "ir para a definição" funcionam melhor porque o editor sabe o que é cada valor.

Esta é uma grande razão pela qual muitos construtores de aplicações com IA usam TypeScript por predefinição.

Uma analogia do dia a dia

Pense num armazém de expedição com zonas identificadas. Cada zona tem um cartaz: "Só paletes", "Refrigerado", "Máx. 500 kg". Quando chega uma entrega, um verificador à porta compara a mercadoria com o cartaz. Peixe congelado destinado à zona de mercearia seco é travado à porta, e não descoberto uma semana depois, quando já cheira mal.

O TypeScript é o verificador à porta. Os tipos são os cartazes. A verificação acontece antes de a mercadoria — o seu código — entrar em uso. E, quando tudo está no sítio, os cartazes são retirados: o JavaScript em execução já não tem tipos.

Como funciona o TypeScript

1. Você (ou a IA) escreve ficheiros .ts ou .tsx — TypeScript, com etiquetas de tipo.
2. O verificador de tipos lê o código e reporta as incoerências como erros no editor ou na build.
3. Um passo de build retira os tipos, produzindo JavaScript simples.
4. O JavaScript corre no navegador ou num servidor (Node.js, Deno, Bun).

Uma consequência importante: o TypeScript verifica o código que escreveu, não os dados que chegam enquanto a aplicação está a correr. Se uma API externa devolver algo inesperado, o TypeScript não o vê, a não ser que acrescente validação em tempo de execução.

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

Imagine que está a criar uma aplicação de reservas para um salão de cabeleireiro. Eis um tipo que descreve uma reserva:

type Booking = {
  id: number;
  customerEmail: string;
  service: "haircut" | "colour" | "blow-dry";
  startsAt: Date;
  price: number;
  notes?: string; // o ? significa que é 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 apanha.

Um campo com erro de escrita.

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

O TypeScript reporta que prise não é uma propriedade conhecida e que falta price. Em JavaScript simples, isto calcularia silenciosamente um sinal de NaN (não é um número).

O tipo de valor errado.

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

O TypeScript reporta que um texto não pode ser usado onde se espera um número. Sem ele, "40" * 0.2 acaba por funcionar, mas "40" + 5 dá "405" — o tipo de erro que aparece numa fatura.

Um serviço que não existe.

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

O TypeScript reporta que "perm" não é um dos serviços permitidos. Quando o salão acrescentar permanentes mais tarde, adiciona-os ao tipo, e o TypeScript mostra todos os sítios que precisam de ser atualizados — a lista de preços, o formulário, as cores do calendário.

O que não consegue apanhar. Se o formulário de reservas enviar price: "40" do navegador para o servidor, o TypeScript do servidor não vê isso em tempo de execução. Por isso, as aplicações bem construídas também validam os dados recebidos, muitas vezes com uma biblioteca de validação que verifica a estrutura e a transforma num Booking válido.

TypeScript vs JavaScript

Termos comuns explicados

Erros comuns e ideias erradas

• "O TypeScript torna o código isento de erros." Apanha incoerências na estrutura dos dados, não na lógica. Um sinal de 2% em vez de 20% passa na verificação de tipos sem problema.
• "Os tipos protegem-me de dados maus." Os tipos desaparecem em tempo de execução. Valide os dados vindos de utilizadores, formulários e APIs.
• any em todo o lado. Quando uma IA está bloqueada, pode recorrer a any ou a // @ts-ignore para silenciar erros. Isso esconde os problemas em vez de os resolver.
• Ignorar erros de tipo porque a pré-visualização funciona. Algumas ferramentas continuam a executar código com erros de tipo. Esses erros são bugs à espera de acontecer.
• "O TypeScript é mais lento." Os tipos são retirados antes da execução; o JavaScript que corre é essencialmente o mesmo.
• "É só para equipas grandes." Quem trabalha sozinho também beneficia, sobretudo quando é uma IA a fazer a maioria das edições.

O que pedir ao seu construtor de IA

• "Use TypeScript com o modo estrito ativado."
• "Defina tipos partilhados para os nossos registos principais — Customer, Booking, Invoice — e use-os tanto no frontend como no backend."
• "Não use any nem @ts-ignore para contornar erros; resolva o problema de fundo e diga-me qual era."
• "Valide todos os dados recebidos no servidor, não apenas com tipos."
• "Execute o verificador de tipos e corrija todos os erros antes de me dizer que está concluído."
• "Quando mudar o nome de um campo, atualize todos os sítios que o TypeScript assinala."
• "Explique este erro de tipo em linguagem simples."

Para saber mais sobre como verificar o que a IA produziu, veja como rever código gerado por IA e como depurar uma aplicação criada com IA.

O TypeScript no Mythex

Quando não pede nada específico, o Mythex começa os novos projetos com Vite + React + TypeScript + Tailwind. O editor de código inclui inteligência de linguagem — completamentos, diagnósticos e ir para a definição para TypeScript e JavaScript, entre outras linguagens — para que os erros de tipo sejam visíveis no código, e não apenas na pré-visualização. O editor é só de leitura no plano Free e totalmente editável no Pro. Pode sempre pedir outra configuração no primeiro pedido; a página da documentação sobre como a tecnologia é escolhida explica como, e a documentação do editor de código descreve o que o editor mostra.

Perguntas