Projetos Práticos para Aprender TypeScript
Quatro abordagens técnicas, reais e enxutas, para internalizar tipagem, padrões e boas práticas com TypeScript — mantendo o foco na prática.
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.
Sou Apaixonado pela programação e estou trilhando o caminho de ter cada diz mais conhecimento e trazer toda minha experiência vinda do Design para a programação resultando em layouts incríveis e idéias inovadoras! Conecte-se Comigo!