O que é TypeScript e por que usar

1. O que é TypeScript?

TypeScript é um superset do JavaScript que adiciona tipagem estática opcional à linguagem. Criado pela Microsoft e lançado em 2012 como um projeto de código aberto, o TypeScript foi projetado para resolver problemas comuns no desenvolvimento de aplicações JavaScript de grande escala.

A relação entre TypeScript e JavaScript é fundamental: todo código JavaScript válido é código TypeScript válido. Isso significa que você pode pegar qualquer arquivo .js, renomeá-lo para .ts e ele continuará funcionando. No entanto, o contrário não é verdade — nem todo TypeScript é JavaScript válido, pois os tipos e outras construções específicas do TypeScript precisam ser removidos (ou "compilados") antes da execução.

O TypeScript atua como uma camada adicional sobre o JavaScript, oferecendo ferramentas de verificação de tipos que operam em tempo de desenvolvimento, não em tempo de execução. O código TypeScript é compilado (transpilado) para JavaScript puro, que então é executado em qualquer ambiente que suporte JavaScript.

2. Tipagem Estática vs Dinâmica

JavaScript é uma linguagem de tipagem dinâmica, o que significa que os tipos das variáveis são determinados em tempo de execução. Isso pode levar a erros sutis e difíceis de depurar:

// JavaScript puro - tipagem dinâmica
function somar(a, b) {
  return a + b;
}

console.log(somar(5, 10));     // 15 ✅
console.log(somar("5", 10));   // "510" ❌ (concatenação inesperada)

No exemplo acima, a função somar espera dois números, mas recebe uma string. Em JavaScript, isso não gera erro — apenas produz um resultado inesperado. O problema só será descoberto em tempo de execução, possivelmente em produção.

Com TypeScript, podemos capturar esse erro durante a compilação:

// TypeScript - tipagem estática
function somar(a: number, b: number): number {
  return a + b;
}

// Isso geraria um erro de compilação:
// somar("5", 10); // ❌ Erro: Argumento do tipo 'string' não é atribuível ao parâmetro do tipo 'number'

// Uso correto:
console.log(somar(5, 10)); // 15 ✅

Ao executar tsc (o compilador TypeScript), o erro é detectado antes mesmo do código ser executado, economizando horas de depuração.

3. Principais Benefícios do TypeScript

Descoberta de erros em tempo de desenvolvimento

O TypeScript oferece autocomplete inteligente e refatoração segura em editores como VS Code. Ao digitar o nome de uma variável ou função, o editor já mostra os tipos esperados e disponíveis:

interface Usuario {
  nome: string;
  idade: number;
  email: string;
}

function saudacao(usuario: Usuario) {
  // O editor já sugere: usuario.nome, usuario.idade, usuario.email
  return `Olá, ${usuario.nome}!`;
}

Documentação viva

Os tipos funcionam como documentação auto-atualizável. Ao olhar para uma função, você sabe exatamente quais parâmetros esperar e o que será retornado:

type StatusPedido = "pendente" | "processando" | "enviado" | "entregue";

function atualizarStatus(pedidoId: number, novoStatus: StatusPedido): boolean {
  // Implementação...
  return true;
}

// Quem usar esta função sabe imediatamente os valores válidos para novoStatus

Melhor manutenção em projetos grandes

Em projetos com múltiplos desenvolvedores, interfaces e tipos reduzem significativamente a quantidade de bugs. Mudanças em uma estrutura de dados são propagadas automaticamente pelo compilador:

interface Produto {
  id: number;
  nome: string;
  preco: number;
  categoria: string;
}

function calcularTotal(produtos: Produto[]): number {
  return produtos.reduce((total, p) => total + p.preco, 0);
}

// Se adicionarmos um novo campo obrigatório em Produto,
// o TypeScript apontará todos os lugares que precisam ser atualizados

4. Recursos Essenciais do TypeScript

Anotações de tipo

As anotações básicas são simples e intuitivas:

let nome: string = "João";
let idade: number = 30;
let ativo: boolean = true;
let dados: any = "pode ser qualquer coisa"; // Use com moderação!
let lista: number[] = [1, 2, 3];
let tupla: [string, number] = ["João", 30];

Inferência de tipos

Na maioria dos casos, o TypeScript deduz o tipo automaticamente:

let mensagem = "Olá, mundo!"; // TypeScript infere que é string
let contador = 0;             // TypeScript infere que é number

// Não é necessário anotar o tipo quando a inferência é óbvia

Interfaces e type aliases

Para modelar dados complexos:

// Interface
interface Pessoa {
  nome: string;
  idade: number;
  email?: string; // Campo opcional
}

// Type alias
type Animal = {
  especie: string;
  nome: string;
  idade: number;
};

// Usando interfaces
function cadastrarPessoa(pessoa: Pessoa): void {
  console.log(`Cadastrado: ${pessoa.nome}`);
}

const joao: Pessoa = { nome: "João", idade: 30 };
cadastrarPessoa(joao);

5. TypeScript no Ecossistema Moderno

O TypeScript tem suporte nativo nos principais frameworks:

  • React: npx create-react-app meu-app --template typescript
  • Angular: já vem com TypeScript por padrão
  • Vue: suporte oficial com Vue 3
  • Next.js: npx create-next-app@latest --typescript

Ferramentas de build como Vite e Webpack oferecem suporte integrado, e a comunidade mantém tipos para bibliotecas populares através do DefinitelyTyped (@types/nome-do-pacote).

6. TypeScript vs Alternativas

Característica TypeScript Flow JSDoc
Manutenção Microsoft Meta (Facebook) Comunidade
Adoção Altíssima Baixa Moderada
Verificação Nativa Nativa Apenas com ferramentas
Ecossistema Vasto Limitado Integrado ao JS

O TypeScript se destaca por ter ferramentas mais maduras, ecossistema vasto e suporte oficial nos principais frameworks.

7. Quando (não) usar TypeScript

Casos ideais

  • Projetos grandes com múltiplos desenvolvedores
  • APIs e sistemas com regras de negócio complexas
  • Bibliotecas e pacotes que serão usados por terceiros

Casos questionáveis

  • Scripts pequenos e descartáveis
  • Protótipos rápidos sem intenção de evoluir
  • Times pequenos sem experiência em tipos

Mitigação para adoção gradual

// Configuração tsconfig.json relaxada para adoção gradual
{
  "compilerOptions": {
    "strict": false, // Desabilita verificações rigorosas
    "noImplicitAny": false // Permite any implícito
  }
}

// Uso de 'any' para migração gradual
function processarDados(dados: any) {
  // Aos poucos, substitua 'any' por tipos específicos
  return dados;
}

8. Primeiros Passos Práticos

  1. Instalação global:
npm install -g typescript
  1. Crie um arquivo exemplo.ts:
function calcularPrecoComDesconto(precoOriginal: number, descontoPercentual: number): number {
  const desconto = (precoOriginal * descontoPercentual) / 100;
  return precoOriginal - desconto;
}

// Uso correto
const precoFinal = calcularPrecoComDesconto(100, 20);
console.log(`Preço final: R$ ${precoFinal}`); // Preço final: R$ 80

// Isto causaria erro de compilação:
// const erro = calcularPrecoComDesconto("100", "20"); // ❌
  1. Compile e execute:
tsc exemplo.ts    # Gera exemplo.js
node exemplo.js   # Executa o JavaScript gerado

O TypeScript não é apenas uma ferramenta — é um investimento na qualidade e manutenibilidade do seu código. Comece pequeno, adote gradualmente e descubra como a tipagem estática pode transformar sua experiência de desenvolvimento.

Referências