O que é TypeScript e sua Filosofia
TypeScript é um superset da linguagem JavaScript que adiciona tipagem estática opcional ao código. Desenvolvido pela Microsoft e lançado em 2012, ele permite que você escreva código JavaScript com maior segurança, detectando erros em tempo de desenvolvimento em vez de em tempo de execução. A filosofia central do TypeScript é simples: permitir que você use JavaScript como sempre usou, mas com a possibilidade de adicionar tipos quando necessário.
A grande vantagem está na prevenção de bugs. Enquanto JavaScript permite que você atribua qualquer valor a qualquer variável, TypeScript força você a ser explícito sobre o tipo de dado esperado. Isso não torna o código "melhor" automaticamente, mas torna mais fácil encontrar erros antes que o código chegue aos usuários finais. TypeScript também melhora a experiência do desenvolvedor com autocompletar inteligente e refatoração segura em editores modernos como VS Code.
Instalação e Configuração do Ambiente
Pré-requisitos
Antes de instalar TypeScript, você precisa ter o Node.js instalado em sua máquina. O Node.js inclui o npm (Node Package Manager), que é essencial para gerenciar dependências. Você pode verificar se tem Node.js instalado executando o comando abaixo no terminal:
node --version
npm --version
Se receber versões em ambos os casos, você está pronto. Caso contrário, visite nodejs.org e baixe a versão LTS (Long Term Support).
Instalando TypeScript Globalmente
A forma mais comum de instalar TypeScript é através do npm de forma global, permitindo que você use o compilador tsc de qualquer diretório em sua máquina:
npm install -g typescript
Verifique se a instalação foi bem-sucedida:
tsc --version
Se a versão for exibida, você tem TypeScript funcionando corretamente. Este comando instalará o compilador TypeScript globalmente, disponibilizando-o em qualquer terminal da sua máquina.
Instalando TypeScript em um Projeto Local
Em projetos profissionais, é recomendável instalar TypeScript como dependência local do projeto, garantindo que toda a equipe use a mesma versão. Primeiro, crie uma pasta para seu projeto e inicialize um arquivo package.json:
mkdir meu-projeto-typescript
cd meu-projeto-typescript
npm init -y
Agora instale TypeScript como dependência de desenvolvimento:
npm install --save-dev typescript
Verifique a instalação local:
npx tsc --version
Note o uso de npx antes do comando tsc — ele executa o TypeScript instalado localmente no projeto, não o global. Esta é a melhor prática em ambientes de equipe.
Entendendo o Compilador tsc
O que é o tsc e Como Funciona
O tsc (TypeScript Compiler) é o coração do TypeScript. Ele lê arquivos .ts (TypeScript) e os converte em arquivos .js (JavaScript) que os navegadores e Node.js conseguem entender. Durante esse processo, o compilador valida todos os tipos e reporta erros sem gerar JavaScript se houver problemas graves de tipagem.
A compilação é um passo essencial no workflow de desenvolvimento com TypeScript. Você nunca executa diretamente um arquivo .ts — sempre executa o .js gerado pelo compilador. Este processo de compilação é onde a maioria das vantagens de TypeScript aparecem, detectando problemas que JavaScript deixaria passar silenciosamente.
Compilando um Arquivo Simples
Vamos criar nosso primeiro arquivo TypeScript. Crie um arquivo chamado hello.ts:
let mensagem: string = "Olá, TypeScript!";
console.log(mensagem);
// Isto causaria um erro de compilação:
// mensagem = 42; // Erro: Type 'number' is not assignable to type 'string'
Para compilar este arquivo, use:
tsc hello.ts
O compilador gerará um arquivo hello.js na mesma pasta com o seguinte conteúdo:
var mensagem = "Olá, TypeScript!";
console.log(mensagem);
Agora você pode executar o JavaScript gerado:
node hello.js
Note que as anotações de tipo (: string) foram removidas durante a compilação. TypeScript usa esses tipos apenas para validação em tempo de desenvolvimento; o JavaScript final não tem nenhuma informação de tipo.
Usando tsconfig.json para Configuração
Em projetos reais, você não quer compilar arquivo por arquivo manualmente. Em vez disso, crie um arquivo tsconfig.json na raiz do seu projeto para configurar como o compilador deve funcionar:
tsc --init
Isso gera um arquivo tsconfig.json com várias opções. Para um projeto simples, você pode usar esta configuração:
{
"compilerOptions": {
"target": "ES2020",
"module": "commonjs",
"lib": ["ES2020"],
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}
Com esta configuração, todos os arquivos .ts dentro da pasta src serão compilados para a pasta dist. Crie as pastas:
mkdir src dist
Agora coloque um arquivo TypeScript em src/index.ts:
function saudar(nome: string): string {
return `Olá, ${nome}!`;
}
const resultado = saudar("Maria");
console.log(resultado);
// Isto causaria erro de compilação:
// const erro = saudar(123); // Erro: Argument of type 'number' is not assignable to parameter of type 'string'
Compile tudo com um simples comando:
tsc
O TypeScript compilará todos os arquivos dentro de src e os colocará em dist. Você pode executar:
node dist/index.js
Compilação em Modo Watch
Para desenvolvimento mais fluído, use o modo watch do compilador, que recompila automaticamente sempre que você salva um arquivo:
tsc --watch
Ou com tsconfig.json:
tsc -w
Mantenha esse comando rodando em um terminal enquanto você edita seu código. O TypeScript recompilará automaticamente, permitindo que você veja erros enquanto digita.
Tipagem Básica e Conceitos Fundamentais
Tipos Primitivos
TypeScript suporta os tipos básicos do JavaScript com anotações explícitas. Os tipos primitivos mais comuns são:
// String
let nome: string = "João";
// Number (inteiros e decimais)
let idade: number = 25;
let altura: number = 1.75;
// Boolean
let ativo: boolean = true;
// Any (use com cuidado - derrota o propósito do TypeScript)
let valor: any = "pode ser qualquer coisa";
valor = 42; // Sem erro
// Unknown (similar a any, mas mais seguro)
let desconhecido: unknown = "algo";
// desconhecido.toUpperCase(); // Erro: você deve verificar o tipo primeiro
if (typeof desconhecido === 'string') {
console.log(desconhecido.toUpperCase()); // Agora funciona
}
Interfaces e Tipos Personalizados
Uma das grandes forças do TypeScript é permitir que você defina estruturas de dados complexas. Interfaces descrevem a forma de um objeto:
interface Usuario {
id: number;
nome: string;
email: string;
ativo?: boolean; // A interrogação torna este campo opcional
}
function processarUsuario(usuario: Usuario): void {
console.log(`${usuario.nome} (${usuario.email})`);
}
const user: Usuario = {
id: 1,
nome: "Ana",
email: "ana@example.com"
};
processarUsuario(user); // Funciona
// Isto causaria erro:
// processarUsuario({ id: 1, nome: "Bob" }); // Erro: Property 'email' is missing
Arrays e Genéricos
TypeScript torna seguro trabalhar com listas de dados:
// Array de números
let numeros: number[] = [1, 2, 3];
// Sintaxe alternativa
let strings: Array<string> = ["a", "b", "c"];
// Array misto com tipo union
let mistura: (string | number)[] = [1, "dois", 3];
// Genéricos em funções
function primeira<T>(array: T[]): T | undefined {
return array[0];
}
const primNum = primeira([1, 2, 3]); // Tipo: number | undefined
const primStr = primeira(["a", "b"]); // Tipo: string | undefined
Conclusão
Nesta aula, você aprendeu que TypeScript é uma camada de segurança sobre JavaScript que detecta erros antes do código chegar aos usuários, sem adicionar complexidade desnecessária ao seu workflow. A instalação é simples através do npm, e tanto configurações globais quanto locais são viáveis conforme suas necessidades.
O compilador tsc é seu melhor aliado — ele transforma código TypeScript em JavaScript executável enquanto valida tipos. Dominar o tsconfig.json e o modo watch permite um desenvolvimento mais eficiente, especialmente em projetos maiores.
Por fim, comece com tipagem simples e vá aumentando a complexidade conforme necessário. TypeScript não é "tudo ou nada" — você pode adicionar tipos gradualmente em um projeto JavaScript existente, aproveitando benefícios imediatos sem uma reescrita completa.