Do TypeScript ao JavaScript que o navegador roda
Nenhum navegador do mundo executa TypeScript. Entender o que acontece entre o seu código e a tela evita boa parte da confusão dos primeiros dias.
Estudar esta lição interativa →Depois da lição passada, uma pergunta razoável é: "se o TypeScript tem uma sintaxe diferente, com essa história de dois-pontos e tipos, como isso chega a rodar num navegador?" A resposta curta é: não chega, do jeito que está escrito. Nenhum navegador do planeta sabe o que fazer com let idade: number. Só existe uma linguagem que o navegador entende de verdade, e é o JavaScript de sempre.
Pense no código TypeScript como um rascunho de redação cheio de anotações do revisor nas margens: "isto aqui devia ser um número", "esta função devolve texto". Essas anotações são ótimas enquanto você escreve, para pegar erros de raciocínio. Mas quando a redação vai para a versão final, as anotações somem, e sobra só o texto corrido. É exatamente isso que o compilador do TypeScript faz: ele lê as anotações, confere se tudo bate, e depois apaga essas anotações, entregando puro JavaScript.
Esse processo tem um nome técnico, apagamento de tipos (em inglês, type erasure), e ele acontece toda vez que você clica em Rodar aqui no curso: por baixo dos panos, o seu código TypeScript é convertido para JavaScript equivalente, e é esse JavaScript que efetivamente executa. Rode o exemplo abaixo, com três variáveis anotadas, e leia o comentário no final do código:
// TypeScript por cima, JavaScript por baixo. O código roda normalmente:
let nome: string = "Ana";
let idade: number = 25;
let ativo: boolean = true;
console.log(nome, idade, ativo);
// Quando este código chega ao navegador, os ":string", ":number" e
// ":boolean" já foram removidos. O navegador nunca viu essas partes;
// elas só existiram enquanto o TypeScript checava o seu código.Isso explica uma dúvida comum de quem está começando: "por que preciso anotar tipos, se o navegador nem vai ver essa parte?" Porque a anotação nunca foi para o navegador, ela é para você e para o compilador, enquanto o código ainda está sendo escrito. É uma ferramenta de checagem que existe só durante o desenvolvimento, e desaparece completamente na hora de rodar de verdade. Você ganha a segurança praticamente sem pagar nada em tempo de execução. Com duas exceções que valem conhecer: o enum e as "propriedades de parâmetro" (constructor(private x: number)) geram código JavaScript de verdade, porque não são só tipos. Quase todo o resto da sintaxe de tipos some por inteiro.
Vale fixar essa divisão: o compilador do TypeScript tem o trabalho de checar os tipos e converter a sintaxe; o navegador tem o trabalho de rodar o JavaScript resultante. São dois times separados, e um nunca faz o trabalho do outro. Um arquivo .ts nunca é entregue direto para o navegador em nenhum projeto real; ele sempre passa primeiro por essa conversão.
// Sua vez! Anote os tipos das três variáveis (string, number e boolean, na ordem).
// Uma delas guarda um valor que não combina com o tipo certo: o diagnóstico vai
// apontar qual. Corrija o valor e rode.
let produto = "Teclado mecânico";
let preco = "349,90";
let emEstoque = true;
console.log(produto, preco, emEstoque);Anote os três tipos e clique em Rodar.