Design Patterns

Design Patterns em TypeScript

GoF aplicado ao mundo real

Os 5 padrões de projeto mais usados no desenvolvimento moderno, com exemplos reais em TypeScript, comparativos antes/depois e guia de quando usar cada um.

Por que Design Patterns?

Padrões de projeto são soluções reutilizáveis para problemas recorrentes no desenvolvimento de software. Não são bibliotecas — são vocabulário e estrutura.

Comunicação

Equipes que conhecem os padrões falam a mesma língua: 'use o Strategy aqui' é mais preciso do que 'crie uma abstração'.

Manutenibilidade

Código que segue padrões conhecidos é mais fácil de estender sem quebrar o que já existe.

Entrevistas

Conhecer os padrões GoF é esperado em entrevistas sênior. Saber quando NÃO usar também.

Os 5 Padrões Essenciais

Observer

Comportamental

Notifique múltiplos objetos quando um estado muda.

Define uma dependência um-para-muitos entre objetos. Quando um objeto muda de estado, todos os seus dependentes são notificados automaticamente.

No mundo real: Event listeners do DOM, useState + useEffect no React, Redux, Zustand.

before.ts

// ❌ Antes: acoplamento direto entre componentes
function UserProfile() {
  const handleUpdate = () => {
    // Tem que chamar cada componente manualmente
    updateHeader(user);
    updateSidebar(user);
    updateNotifications(user);
    updateAnalytics(user);
  };
}

Strategy

Comportamental

Troque algoritmos em tempo de execução.

Define uma família de algoritmos, encapsula cada um e os torna intercambiáveis. O cliente pode escolher qual algoritmo usar sem alterar o código que o utiliza.

No mundo real: Ordenação configurável, diferentes formas de pagamento, validadores intercambiáveis.

before.ts

// ❌ Antes: switch/case que cresce infinitamente
function sortData(data: Item[], method: string) {
  if (method === "name") {
    return data.sort((a, b) => a.name.localeCompare(b.name));
  } else if (method === "price") {
    return data.sort((a, b) => a.price - b.price);
  } else if (method === "date") {
    return data.sort((a, b) => a.date.getTime() - b.date.getTime());
  }
  // Cada novo critério = modificar esta função
  return data;
}

Factory Method

Criacional

Delegue a criação de objetos para subclasses.

Define uma interface para criar objetos, mas deixa as subclasses decidirem qual classe instanciar. O Factory Method adia a instanciação para as subclasses.

No mundo real: React.createElement, document.createElement, criação de conexões de banco.

before.ts

// ❌ Antes: lógica de criação espalhada
function createButton(type: string) {
  if (type === "primary") {
    const btn = document.createElement("button");
    btn.className = "btn-primary";
    btn.style.backgroundColor = "#007bff";
    return btn;
  } else if (type === "danger") {
    const btn = document.createElement("button");
    btn.className = "btn-danger";
    btn.style.backgroundColor = "#dc3545";
    return btn;
  }
  // Duplicação em cada lugar que precisa criar botões
}

Decorator

Estrutural

Adicione responsabilidades a objetos dinamicamente.

Anexa responsabilidades adicionais a um objeto dinamicamente. Decoradores fornecem uma alternativa flexível à herança para estender funcionalidade.

No mundo real: HOCs no React, middleware no Express/Next.js, decorators do TypeScript.

before.ts

// ❌ Antes: herança para cada combinação
class Logger { log(msg: string) { console.log(msg); } }
class TimestampLogger extends Logger { /* ... */ }
class JsonLogger extends Logger { /* ... */ }
class TimestampJsonLogger extends Logger { /* ... */ }
// N funcionalidades = 2^N subclasses possíveis

Command

Comportamental

Encapsule ações como objetos.

Encapsula uma requisição como um objeto, permitindo parametrizar clientes com diferentes requisições, enfileirar ou registrar requisições, e implementar operações desfazíveis.

No mundo real: Undo/redo em editores, filas de tarefas, transações de banco de dados.

before.ts

// ❌ Antes: ações diretas sem histórico
function TextEditor() {
  const [text, setText] = useState("");
 
  const bold = () => setText(t => `**${t}**`);
  const italic = () => setText(t => `_${t}_`);
  // Impossível desfazer — não há histórico
}

Quando Usar Cada Padrão

Um dos erros mais comuns é aplicar padrões desnecessariamente. Saiba identificar o momento certo.

Observer

Use quando...

✓Múltiplos componentes precisam reagir ao mesmo evento
✓O emissor não sabe quantos ouvintes existem
✓Você precisa de acoplamento fraco entre remetente e receptor

Não use quando...

✗Há apenas 1-2 ouvintes fixos
✗A performance é crítica (muitas notificações)
✗A ordem de notificação importa muito

Strategy

Use quando...

✓Várias variações de um algoritmo coexistem
✓Você precisa trocar o algoritmo em runtime
✓Quer eliminar condicionais if/else/switch em crescimento

Não use quando...

✗Você tem apenas 2 algoritmos simples
✗Os algoritmos raramente mudam
✗A abstração adicional complica mais do que simplifica

Factory

Use quando...

✓A lógica de criação é complexa ou condicional
✓Você precisa desacoplar cliente da implementação concreta
✓Quer centralizar criação para facilitar testes

Não use quando...

✗A criação é simples (new MinhaClasse())
✗Não há variações do objeto a criar
✗Adiciona indireção sem benefício claro

Decorator

Use quando...

✓Precisa adicionar comportamentos sem alterar a classe base
✓A herança criaria uma explosão de subclasses
✓Comportamentos precisam ser combinados livremente

Não use quando...

✗A ordem dos decoradores é difícil de rastrear
✗Você controla a classe e pode simplesmente estendê-la
✗Debug complexo é inaceitável

Command

Use quando...

✓Funcionalidade de undo/redo é necessária
✓Operações precisam ser enfileiradas ou agendadas
✓Você quer registrar um histórico de ações

Não use quando...

✗Operações são simples e não precisam de histórico
✗Overhead de criar objetos Command é injustificado
✗Sem necessidade de reversão ou enfileiramento

Aplique no Seu Projeto

Padrões são ferramentas, não regras. Use quando simplificam o design, não para impressionar.

Ver mais guias

Ver no GitHub

Conteúdo relacionado

Dicas de IA para DesenvolvedoresGuia prático de ferramentas IA, uso consciente de tokens e modelos: v0, Copilot, prompt engineering, boas práticas e ferramentas para produtividade dev.

Tailwind CSS + shadcn/ui — Guia PráticoSetup completo, componentes reutilizáveis, padrões de código e boas práticas com Tailwind CSS e shadcn/ui para projetos React e Next.js.

React Query Essencial — Cache e MutationsGuia completo de TanStack Query (React Query): cache inteligente, mutations, invalidação, otimistic updates e boas práticas para apps React.

15 min de leitura

// ❌ Antes: acoplamento direto entre componentes

function UserProfile() {

const handleUpdate = () => {

// Tem que chamar cada componente manualmente

updateHeader(user);

updateSidebar(user);

updateNotifications(user);

updateAnalytics(user);

};

}

// ❌ Antes: switch/case que cresce infinitamente

function sortData(data: Item[], method: string) {

if (method === "name") {

return data.sort((a, b) => a.name.localeCompare(b.name));

} else if (method === "price") {

return data.sort((a, b) => a.price - b.price);

} else if (method === "date") {

return data.sort((a, b) => a.date.getTime() - b.date.getTime());

}

// Cada novo critério = modificar esta função

return data;

}

// ❌ Antes: lógica de criação espalhada

function createButton(type: string) {

if (type === "primary") {

const btn = document.createElement("button");

btn.className = "btn-primary";

btn.style.backgroundColor = "#007bff";

return btn;

} else if (type === "danger") {

const btn = document.createElement("button");

btn.className = "btn-danger";

btn.style.backgroundColor = "#dc3545";

return btn;

}

// Duplicação em cada lugar que precisa criar botões

}

// ❌ Antes: herança para cada combinação

class Logger { log(msg: string) { console.log(msg); } }

class TimestampLogger extends Logger { /* ... */ }

class JsonLogger extends Logger { /* ... */ }

class TimestampJsonLogger extends Logger { /* ... */ }

// N funcionalidades = 2^N subclasses possíveis

// ❌ Antes: ações diretas sem histórico

function TextEditor() {

const [text, setText] = useState("");

const bold = () => setText(t => `**${t}**`);

const italic = () => setText(t => `_${t}_`);

// Impossível desfazer — não há histórico

}