Padrões de Projeto em TypeScript: Nível Avançado com Exemplos

Padrões de Design em TypeScript: nível avançado com exemplos

Quando os padrões básicos (Singleton, Factory Method, Observer) são dominados, chega a hora de soluções arquiteturais mais complexas. TypeScript, com seu poderoso sistema de tipos, genéricos e decoradores, abre novas possibilidades para implementar padrões GoF avançados. Neste artigo, vamos analisar quatro padrões-chave: Abstract Factory, Builder, Chain of Responsibility e Strategy — com foco em recursos específicos do TypeScript.

1. Abstract Factory com famílias tipadas

O padrão "Abstract Factory" permite criar famílias de objetos relacionados sem vincular a classes concretas. No TypeScript, podemos usar interfaces e genéricos para uma tipagem estrita dos produtos.

Exemplo: Criação de componentes de UI para diferentes sistemas operacionais.

// Produtos abstratosinterface Button {  render(): void;  click(): void;}

interface Checkbox {  render(): void;  toggle(): void;}

// Produtos concretos para Windowsclass WinButton implements Button {  render() { console.log('Renderizando botão Windows'); }  click() { console.log('Clique no botão Windows'); }}

class WinCheckbox implements Checkbox {  render() { console.log('Renderizando checkbox Windows'); }  toggle() { console.log('Alternando checkbox Windows'); }}

// Produtos concretos para macOSclass MacButton implements Button {  render() { console.log('Renderizando botão macOS'); }  click() { console.log('Clique no botão macOS'); }}

class MacCheckbox implements Checkbox {  render() { console.log('Renderizando checkbox macOS'); }  toggle() { console.log('Alternando checkbox macOS'); }}

// Abstract Factoryinterface GUIFactory {  createButton(): Button;  createCheckbox(): Checkbox;}

// Fábricas concretasclass WinFactory implements GUIFactory {  createButton(): Button { return new WinButton(); }  createCheckbox(): Checkbox { return new WinCheckbox(); }}

class MacFactory implements GUIFactory {  createButton(): Button { return new MacButton(); }  createCheckbox(): Checkbox { return new MacCheckbox(); }}

// Usofunction createUI(factory: GUIFactory) {  const button = factory.createButton();  const checkbox = factory.createCheckbox();  button.render();  checkbox.render();}

createUI(new WinFactory());// Renderizando botão Windows// Renderizando checkbox Windows

Técnica avançada: Use genéricos se a fábrica precisar trabalhar com diferentes tipos de produtos:

abstract class AbstractFactory<TProduct> {  abstract createProduct(): TProduct;}

class ConcreteFactory extends AbstractFactory<Button> {  createProduct(): Button {    return new WinButton();  }}

2. Builder com fluent-interface e imutabilidade

O padrão "Builder" é útil quando um objeto tem muitos parâmetros opcionais. TypeScript permite criar um builder type-safe com encadeamento de métodos.

Exemplo: Configuração de uma requisição HTTP.

class HttpRequest {  private constructor(    public readonly url: string,    public readonly method: 'GET' | 'POST' | 'PUT',    public readonly headers: Record<string, string>,    public readonly body?: string  ) {}

  static builder(): HttpRequestBuilder {    return new HttpRequestBuilder();  }}

class HttpRequestBuilder {  private url: string = '';  private method: 'GET' | 'POST' | 'PUT' = 'GET';  private headers: Record<string, string> = {};  private body?: string;

  setUrl(url: string): this {    this.url = url;    return this;  }

  setMethod(method: 'GET' | 'POST' | 'PUT'): this {    this.method = method;    return this;  }

  addH