Entwurfsmuster in TypeScript: Fortgeschrittenes Niveau mit Beispielen

Entwurfsmuster in TypeScript: Fortgeschrittenes Niveau mit Beispielen

Wenn die grundlegenden Muster (Singleton, Factory Method, Observer) gemeistert sind, ist es Zeit für komplexere architektonische Lösungen. TypeScript mit seinem leistungsstarken Typsystem, Generics und Dekoratoren eröffnet neue Möglichkeiten zur Implementierung fortgeschrittener GoF-Muster. In diesem Artikel behandeln wir vier Schlüsselmuster: Abstrakte Fabrik, Erbauer, Verantwortungskette und Strategie — mit Fokus auf TypeScript-spezifische Features.

1. Abstrakte Fabrik (Abstract Factory) mit typisierten Familien

Das Muster „Abstrakte Fabrik" ermöglicht die Erstellung von Familien zusammenhängender Objekte ohne Bindung an konkrete Klassen. In TypeScript können wir Interfaces und Generics für strenge Typisierung der Produkte verwenden.

Beispiel: Erstellung von UI-Komponenten für verschiedene Betriebssysteme.

// Abstrakte Produkteinterface Button {  render(): void;  click(): void;}

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

// Konkrete Produkte für Windowsclass WinButton implements Button {  render() { console.log('Zeichne Windows-Button'); }  click() { console.log('Klick auf Windows-Button'); }}

class WinCheckbox implements Checkbox {  render() { console.log('Zeichne Windows-Checkbox'); }  toggle() { console.log('Umschalten der Windows-Checkbox'); }}

// Konkrete Produkte für macOSclass MacButton implements Button {  render() { console.log('Zeichne macOS-Button'); }  click() { console.log('Klick auf macOS-Button'); }}

class MacCheckbox implements Checkbox {  render() { console.log('Zeichne macOS-Checkbox'); }  toggle() { console.log('Umschalten der macOS-Checkbox'); }}

// Abstrakte Fabrikinterface GUIFactory {  createButton(): Button;  createCheckbox(): Checkbox;}

// Konkrete Fabrikenclass 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(); }}

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

createUI(new WinFactory());// Zeichne Windows-Button// Zeichne Windows-Checkbox

Fortgeschrittener Trick: Verwenden Sie Generics, wenn die Fabrik mit verschiedenen Produkttypen arbeiten soll:

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

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

2. Erbauer (Builder) mit fluent-Interface und Unveränderlichkeit

Das Muster „Erbauer" ist nützlich, wenn ein Objekt viele optionale Parameter hat. TypeScript ermöglicht die Erstellung eines typsicheren Builders mit Methodenverkettung.

Beispiel: Konfiguration einer HTTP-Anfrage.

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