Patrones de diseño en TypeScript: nivel avanzado con ejemplos

Patrones de diseño en TypeScript: nivel avanzado con ejemplos

Cuando los patrones básicos (Singleton, Factory Method, Observer) ya se dominan, llega el momento de soluciones arquitectónicas más complejas. TypeScript, con su potente sistema de tipos, genéricos y decoradores, abre nuevas posibilidades para implementar patrones GoF avanzados. En este artículo analizaremos cuatro patrones clave: Abstract Factory, Builder, Chain of Responsibility y Strategy — con énfasis en las características específicas de TypeScript.

1. Abstract Factory con familias tipificadas

El patrón «Abstract Factory» permite crear familias de objetos relacionados sin vincularse a clases concretas. En TypeScript podemos usar interfaces y genéricos para una tipificación estricta de los productos.

Ejemplo: Creación de componentes UI para diferentes sistemas operativos.

// Productos abstractosinterface Button {  render(): void;  click(): void;}

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

// Productos concretos para Windowsclass WinButton implements Button {  render() { console.log('Renderizando botón de Windows'); }  click() { console.log('Click en botón de Windows'); }}

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

// Productos concretos para macOSclass MacButton implements Button {  render() { console.log('Renderizando botón de macOS'); }  click() { console.log('Click en botón de macOS'); }}

class MacCheckbox implements Checkbox {  render() { console.log('Renderizando checkbox de macOS'); }  toggle() { console.log('Alternando checkbox de 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ón de Windows// Renderizando checkbox de Windows

Técnica avanzada: Use genéricos si la fábrica debe trabajar con diferentes tipos de productos:

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

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

2. Builder con interfaz fluida e inmutabilidad

El patrón «Builder» es útil cuando un objeto tiene múltiples parámetros opcionales. TypeScript permite crear un builder type-safe con encadenamiento de métodos.

Ejemplo: Configuración de una petición 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