10 Projetos Práticos para Aprender TypeScript: Guia Completo para Iniciantes

10 Projetos Práticos para Aprender TypeScript: Guia Completo para Iniciantes





Projetos Práticos para Aprender TypeScript



Projeto 1 — Calculadora tipada com discriminated unions

Este projeto demonstra como empregar unions discriminadas para representar diferentes operações aritméticas com tipagem estática. A ideia é garantir que cada operação traga apenas campos relevantes e que o compilador possa checar cada caminho possível ao calcular o resultado.

  • Definição de tipos para cada operação com um discriminante comum (kind).
  • Uso de switch sobre o discriminante para obter desempenho e clareza na lógica.
  • Benefícios: segurança de tipo, autocomplete melhorado e menos erros em tempo de execução.

Projeto 1 — Exemplo de código

A seguir, um snippet compacto que ilustra a construção e o consumo de operações com discriminated unions. Você pode expandir para incluir validação de entrada ou baterias de testes simples.

type Add = { kind: 'add'; a: number; b: number }
type Sub = { kind: 'sub'; a: number; b: number }
type Mul = { kind: 'mul'; a: number; b: number }
type Div = { kind: 'div'; a: number; b: number }

type Operation = Add | Sub | Mul | Div

function compute(op: Operation): number {
  switch (op.kind) {
    case 'add': return op.a + op.b;
    case 'sub': return op.a - op.b;
    case 'mul': return op.a * op.b;
    case 'div': return op.b === 0 ? NaN : op.a / op.b;
  }
}

const ops: Operation[] = [
  { kind: 'add', a: 5, b: 3 },
  { kind: 'div', a: 10, b: 2 },
  { kind: 'sub', a: 9, b: 4 }
]

ops.forEach(o => {
  console.log(`${o.kind}: ${compute(o)}`);
})

Projeto 2 — Cliente HTTP tipado com generics

Ao lidar com APIs, o TS brilha quando usamos tipos genéricos para representar respostas. Definimos um envelope de API que envolve o dado esperado, além do possível erro, permitindo que o consumidor desconstrua com segurança.

  • ApiResponse encapsula a resposta de forma tipada.
  • Funções auxiliares tipadas para parsear e tratar erros sem perder o tipo.
  • Dicas de ergonomia: funções de utilidade para transformar erros em valores tipados utilizáveis pelo consumidor.

Projeto 3 — Validação de dados com type guards

Validação é crucial ao trabalhar com dados dinâmicos (entrada de usuários, APIs terceiras). Type guards e predicados ajudam a evitar repassar valores incompatíveis pelo sistema, mantendo a segurança de tipo ao longo do fluxo.

  • Type guards simples para distinguir entre tipos primitivos e estruturas mais complexas.
  • Asserções de tipo com checks explícitos para estados esperados (asserts data is …).
  • Estrutura de validação clara, com mensagens de erro descritivas para consumo pela UI ou logs.