TypeScript: Introdução ao TypeScript
O TypeScript é uma “versão aprimorada” do JavaScript — ele adiciona verificação de tipos ao JavaScript, permitindo que você detecte erros antes que o código seja executado.
Este tutorial foi elaborado para iniciantes sem experiência prévia. Ele começa com a instalação e a configuração e orienta você durante todo o processo até o desenvolvimento autônomo de um aplicativo de linha de comando usando TypeScript.
1. O que você vai aprender
- Tipos básicos e anotações de tipo no TypeScript
- Conceitos fundamentais, como interfaces, genéricos e aliases de tipo
- Como usar classes, módulos e decoradores no TypeScript
- Migração de um projeto em JavaScript para TypeScript
- Prática abrangente em projetos
2. O que é o TypeScript?
O TypeScript é uma linguagem de programação de código aberto desenvolvida pela Microsoft e lançada pela primeira vez em 2012. Trata-se de um superconjunto do JavaScript — o que significa que todo código válido em JavaScript também é válido em TypeScript; no entanto, o TypeScript acrescenta um sistema de tipos a isso.
Para usar uma analogia: JavaScript é como andar de bicicleta — você consegue chegar ao destino sem olhar para as placas de rua, mas é fácil virar na direção errada; TypeScript é como andar de bicicleta usando um GPS — ele indica onde virar e quais ruas são becos sem saída antes mesmo de você sair.
3. A relação entre TypeScript e JavaScript
Para compreender a relação entre TS e JS, o segredo está em três conceitos: superconjunto, compilação e compatibilidade.
(1) Superconjunto: tudo o que está em TS também está em JS
Qualquer código JavaScript funcionará se você simplesmente inseri-lo diretamente em um arquivo .ts. Você não precisa aprender uma nova linguagem do zero — o TypeScript se baseia no JavaScript, em vez de partir do zero.
(2) Compilação: o TS não pode ser executado diretamente em um navegador
Os navegadores suportam apenas JavaScript, e não TypeScript. Portanto, o código .ts que você escreve deve primeiro ser compilado pelo compilador do TypeScript (tsc) em um arquivo .js antes de poder ser executado em um navegador ou no Node.js.
.ts Documents → TypeScript Compiler (tsc) → .js Documents → Browser/Node.js Run
Esse processo de compilação é o principal diferencial do TypeScript — a verificação de erros de tipo em tempo de compilação, em vez de esperar até o tempo de execução para relatar os erros.
(3) Compatibilidade: os projetos JS existentes podem ser migrados gradualmente
Você pode alterar .js para .ts arquivo por arquivo; não é necessário reescrever todo o projeto de uma só vez. A documentação oficial do TypeScript oferece a opção allowJs, que permite misturar arquivos JavaScript dentro de um projeto TypeScript.
▶ Exemplo: Usando código JavaScript diretamente como TypeScript
// This is a standard JavaScript Code
function greet(name) {
return "Hello, " + name;
}
console.log(greet("Charlie"));
Esse código não requer modificações; basta colocá-lo no arquivo .ts e ele será compilado com sucesso — já que o TypeScript é um superconjunto do JavaScript.
Saída:
Hello, Charlie
4. Por que aprender TypeScript?
Se você já sabe JavaScript, por que perder tempo aprendendo TypeScript? Quatro palavras: prevenção de erros e maior eficiência.
(1) Os erros são detectados na fase de compilação, em vez de causarem uma falha na fase de execução
JavaScript é uma linguagem de tipagem dinâmica — o tipo de uma variável só é determinado no momento da execução. Isso oferece flexibilidade, mas tem um custo: um erro de digitação ou uma incompatibilidade de tipos pode não ser detectado até que o usuário clique em um botão.
// JavaScript：No errors will occur，But the result was NaN
let price = "99";
let total = price * 2; // NaN —— Strings cannot be multiplied.
O TypeScript vai detectar o erro na hora da compilação:
// TypeScript：Compilation error，Immediate Reminder
let price: string = "99";
let total: number = price * 2; // ❌ Error：string This type cannot be used in arithmetic operations.
(2) O preenchimento automático do editor agiliza a programação
O VS Code oferece suporte pronto para uso ao TypeScript. À medida que você digita o nome de uma variável, o editor sugere automaticamente as propriedades e métodos disponíveis e destaca erros de tipo em tempo real — é como ter um parceiro ao seu lado para mantê-lo no caminho certo.
(3) O código é documentação, o que facilita a colaboração da equipe
As anotações de tipo no TypeScript são a melhor forma de documentação. Ao ver function getUser(id: number): User, você sabe imediatamente que o parâmetro é um número e que o valor de retorno é um objeto User. Não há necessidade de escrever comentários adicionais — o próprio tipo já diz tudo.
(4) Tendências do setor: um ponto positivo para o emprego
A partir da versão 2.0, o Angular passou a ser desenvolvido em TypeScript; o Vue 3 foi reescrito em TypeScript; o React + TypeScript tornou-se o padrão; e o Deno e o Bun oferecem suporte nativo ao TypeScript. Nas vagas de emprego na área de front-end, a “familiaridade com TypeScript” deixou de ser um diferencial para se tornar um requisito básico.
▶ Exemplo: Verificação de tipos do TypeScript em ação
// TypeScript Type errors will be caught at compile time
let age: number = 25;
age = "Twenty-six"; // ❌ Compilation Error：You cannot string Assign to number
// JavaScript The same code won't cause an error here.，But there might be problems during runtime.
Saída:
// Executed successfully
age = "twenty-six" acima será destacada em vermelho e sinalizada como um erro durante a compilação do TypeScript; assim, você saberá que há um problema antes mesmo de executar o programa. No JavaScript, no entanto, esse código é executado “corretamente” até que, de repente, o programa trave ao ser realizada uma operação matemática em age.
5. O fluxo de trabalho do TypeScript
O processo completo de desenvolvimento com TypeScript é o seguinte:
- Crie um arquivo
.ts— escreva o código em TypeScript e adicione anotações de tipo - Compilar
.ts→.js— Compilar usando o comandotsc; o compilador verifica se há erros de tipo - Execute o arquivo
.js— o JavaScript compilado pode ser executado em qualquer ambiente
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Write .ts │ ──→ │ tsc Compilation │ ──→ │ Run .js │
│ Type Annotations │ │ Type Checking │ │ Browser/Node │
└──────────────┘ └──────────────┘ └──────────────┘
6. Quem deve aprender TypeScript
| Adequado para | Não muito adequado para |
|---|---|
| Desenvolvedores front-end com conhecimentos básicos de JavaScript | Iniciantes sem nenhuma experiência em programação (começam com JavaScript) |
| Desenvolvedores que buscam melhorar a qualidade do código e a colaboração em equipe | Situações em que você escreve apenas scripts simples e não precisa de segurança de tipos |
| Pessoas que estão se preparando para iniciar um projeto em Angular/Vue 3/React+TS | Projetos pequenos e de curto prazo em que o esforço não compensa o retorno |
| Desenvolvedor de Back-end em Node.js | — |
▶ Exemplo: TypeScript adiciona segurança ao JavaScript
Saída:
8
// JavaScript — no type errors, but buggy
function add(a, b) {
return a + b; // "5" + 3 = "53" (string concatenation!)
}
// TypeScript — catches the bug at compile time
function addTyped(a: number, b: number): number {
return a + b; // always returns a number
}
console.log(addTyped(5, 3)); // 8
// addTyped("5", 3); // ❌ Error: string not assignable to number
Saída:
8
❓ Perguntas Frequentes
P: Qual é exatamente a relação entre TypeScript e JavaScript? R: O TypeScript é um superconjunto do JavaScript. Para usar uma analogia: o JavaScript é água da torneira, enquanto o TypeScript é água da torneira que passou por um purificador — a fonte é a mesma, mas o TS adiciona uma camada extra de “filtragem” (verificação de tipos), tornando-a mais segura. Todo código JS é, naturalmente, um código TS válido, portanto, você não precisa descartar nenhum dos seus conhecimentos existentes.
P: Preciso ser especialista em JavaScript antes de aprender TypeScript? R: Você não precisa ser especialista, mas deve, pelo menos, estar familiarizado com a sintaxe básica — variáveis, funções, objetos, matrizes e assim por diante. Isso porque o TypeScript não é uma linguagem totalmente nova; é uma versão aprimorada do JavaScript. É como se você precisasse saber andar de bicicleta antes de poder dirigir um carro automático.
P: A compilação do TypeScript deixa o programa mais lento? R: Não. A compilação do TypeScript gera código JavaScript padrão, portanto, o desempenho em tempo de execução é exatamente o mesmo do JavaScript escrito manualmente. As anotações de tipo são “apagadas” durante a compilação e não aparecem no arquivo .js final.
P: Todos os frameworks populares atualmente usam TypeScript? R: Sim. O Angular vem sendo desenvolvido em TypeScript desde a versão 2.0; o Vue 3 reescreveu seu núcleo em TypeScript; o TypeScript se tornou o padrão na comunidade React; e o Deno e o Bun oferecem suporte nativo ao TypeScript. É seguro afirmar que o TypeScript se tornou a “linguagem padrão” para o desenvolvimento front-end moderno.
📖 Resumo
- O TypeScript é um superconjunto do JavaScript que incorpora um sistema de tipos estáticos
- O código TS precisa ser compilado para JS para poder ser executado; o processo de compilação é o processo de verificação de tipos.
- Os principais valores do TypeScript: detecção de erros em tempo de compilação, autocompletar no editor, código como documentação e tendências do setor
- Todo código JavaScript é, por natureza, código TypeScript válido
- Antes de começar este tutorial, você deve ter um conhecimento básico da sintaxe do JavaScript.
📝 Exercícios
- Pergunta básica (Dificuldade: ⭐): Explique com suas próprias palavras as três principais diferenças entre TypeScript e JavaScript e descreva o que você entende pelo termo “superconjunto”.
- Exercício avançado (Dificuldade ⭐⭐): Escreva um trecho de código em JavaScript que contenha um erro de tipo (como tratar uma string como um número) e, em seguida, explique como o TypeScript detecta esse erro em tempo de compilação.
- Desafio (Dificuldade: ⭐⭐⭐): Pesquise uma estrutura de front-end que lhe interesse (Angular / Vue / React), descubra até que ponto ela oferece suporte ao TypeScript e escreva um breve resumo.
