Erweiterte Entwurfsmuster in TypeScript

Entwurfsmuster sind bewährte Lösungen für wiederkehrende Probleme beim Softwaredesign. Sie verbessern die Lesbarkeit, Skalierbarkeit und Wartbarkeit des Codes. TypeScript ist mit seiner starken Typisierung und modernen JavaScript-Grundlage eine hervorragende Sprache, um diese Muster effektiv zu implementieren.

Dieser Artikel befasst sich mit fortgeschrittenen und häufig verwendeten Entwurfsmustern und erläutert deren Konzepte, TypeScript-Implementierungen und praktische Anwendungsfälle. Egal, ob Sie ein erfahrener Entwickler sind oder sich mit TypeScript beschäftigen, Sie erhalten wertvolle Einblicke in die Erstellung robuster Anwendungen.

Was sind Designmuster?

Entwurfsmuster sind wiederverwendbare Lösungen für häufige Entwurfsprobleme. Sie werden in drei Haupttypen eingeteilt:

1. Erstellungsmuster:Befassen sich mit der Objekterstellung.
2. Strukturelle Muster: Konzentrieren Sie sich auf die Objektzusammensetzung.
3. Verhaltensmuster:Beschäftigt sich mit der Objektinteraktion.

Kreative Entwurfsmuster in TypeScript

1. Singleton-Muster
Stellt sicher, dass eine Klasse in der gesamten Anwendung nur eine Instanz hat.

Anwendungsfall:Globalen Status oder Konfigurationen verwalten.

Umsetzung:

class Singleton {
  private static instance: Singleton;

  private constructor() {}

  static getInstance(): Singleton {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }

  public showMessage(): void {
    console.log("Hello, Singleton!");
  }
}

// Usage
const singleton1 = Singleton.getInstance();
const singleton2 = Singleton.getInstance();
console.log(singleton1 === singleton2); // true

2. Fabrikmethode
Erstellt Objekte ohne Angabe ihrer genauen Klasse.

Anwendungsfall:Wenn die Objekterstellungslogik abstrahiert werden muss.

Umsetzung:

interface Product {
  operation(): string;
}

class ConcreteProductA implements Product {
  operation(): string {
    return "Product A";
  }
}

class ConcreteProductB implements Product {
  operation(): string {
    return "Product B";
  }
}

abstract class Creator {
  abstract factoryMethod(): Product;

  someOperation(): string {
    const product = this.factoryMethod();
    return `Creator: ${product.operation()}`;
  }
}

class ConcreteCreatorA extends Creator {
  factoryMethod(): Product {
    return new ConcreteProductA();
  }
}

class ConcreteCreatorB extends Creator {
  factoryMethod(): Product {
    return new ConcreteProductB();
  }
}

// Usage
const creatorA = new ConcreteCreatorA();
console.log(creatorA.someOperation());

3. Builder-Muster
Trennt die Objektkonstruktion von ihrer Darstellung.

Anwendungsfall: Komplexe Objekte Schritt für Schritt konstruieren.

Umsetzung:

class Product {
  private parts: string[] = [];

  addPart(part: string): void {
    this.parts.push(part);
  }

  listParts(): void {
    console.log(`Product parts: ${this.parts.join(", ")}`);
  }
}

class Builder {
  private product = new Product();

  reset(): void {
    this.product = new Product();
  }

  addPartA(): void {
    this.product.addPart("Part A");
  }

  addPartB(): void {
    this.product.addPart("Part B");
  }

  getProduct(): Product {
    const result = this.product;
    this.reset();
    return result;
  }
}

// Usage
const builder = new Builder();
builder.addPartA();
builder.addPartB();
const product = builder.getProduct();
product.listParts();

Strukturelle Entwurfsmuster in TypeScript

1. Adaptermuster
Konvertiert die Schnittstelle einer Klasse in eine andere Schnittstelle.

Anwendungsfall: Integration von Bibliotheken von Drittanbietern.

Umsetzung:

class OldSystem {
  oldRequest(): string {
    return "Old System";
  }
}

class NewSystem {
  newRequest(): string {
    return "New System";
  }
}

class Adapter extends OldSystem {
  private adaptee: NewSystem;

  constructor(adaptee: NewSystem) {
    super();
    this.adaptee = adaptee;
  }

  oldRequest(): string {
    return this.adaptee.newRequest();
  }
}

// Usage
const adaptee = new NewSystem();
const adapter = new Adapter(adaptee);
console.log(adapter.oldRequest());

2. Zusammengesetztes Muster
Setzt Objekte in Baumstrukturen zusammen, um Teil-Ganze-Hierarchien darzustellen.

Anwendungsfall:Verwaltung hierarchischer Daten.

Umsetzung:

abstract class Component {
  abstract operation(): string;
}

class Leaf extends Component {
  operation(): string {
    return "Leaf";
  }
}

class Composite extends Component {
  private children: Component[] = [];

  add(component: Component): void {
    this.children.push(component);
  }

  operation(): string {
    const results = this.children.map(child => child.operation());
    return `Composite(${results.join(", ")})`;
  }
}

// Usage
const leaf = new Leaf();
const composite = new Composite();
composite.add(leaf);
console.log(composite.operation());

Verhaltensdesignmuster in TypeScript

1. Beobachtermuster
Definiert eine Abhängigkeit zwischen Objekten, sodass ein Objekt seinen Status ändert und alle abhängigen Objekte benachrichtigt werden.

Anwendungsfall:Ereignissysteme.

Umsetzung:

interface Observer {
  update(message: string): void;
}

class Subject {
  private observers: Observer[] = [];

  attach(observer: Observer): void {
    this.observers.push(observer);
  }

  notify(message: string): void {
    this.observers.forEach(observer => observer.update(message));
  }
}

class ConcreteObserver implements Observer {
  update(message: string): void {
    console.log(`Received message: ${message}`);
  }
}

// Usage
const subject = new Subject();
const observer1 = new ConcreteObserver();
const observer2 = new ConcreteObserver();
subject.attach(observer1);
subject.attach(observer2);
subject.notify("Event occurred!");

2. Strategiemuster
Definiert eine Familie von Algorithmen und macht sie austauschbar.

Anwendungsfall: Zahlungsmethoden oder Sortieralgorithmen.

Umsetzung:

class Singleton {
  private static instance: Singleton;

  private constructor() {}

  static getInstance(): Singleton {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }

  public showMessage(): void {
    console.log("Hello, Singleton!");
  }
}

// Usage
const singleton1 = Singleton.getInstance();
const singleton2 = Singleton.getInstance();
console.log(singleton1 === singleton2); // true

Am Ende,,,

Entwurfsmuster sind leistungsstarke Werkzeuge zum Erstellen skalierbarer, wartbarer Anwendungen. Das robuste Typsystem und die moderne Syntax von TypeScript bieten eine hervorragende Plattform für die effektive Implementierung dieser Muster. Durch das Verständnis und die Anwendung dieser Entwurfsmuster können Entwickler gut strukturierte Softwarelösungen erstellen, die den Test der Zeit bestehen.
Bis bald im nächsten Artikel, Junge!!!

---

Meine persönliche Website: https://shafayet.zya.me

---

Schreckliches Setup?

Das obige ist der detaillierte Inhalt vonErweiterte Entwurfsmuster in TypeScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!