TypeScript 中的高级设计模式

# Web 开发 # JavaScript # 编程 # Typescript

设计模式是经过时间考验的解决方案，可以解决软件设计中反复出现的问题。它们可以提高代码的可读性、可扩展性和可维护性。TypeScript 具有强大的类型功能和现代 JavaScript 基础，是有效实现这些模式的绝佳语言。

本文深入探讨了高级和常用的设计模式，解释了它们的概念、TypeScript 实现和实际用例。无论您是经验丰富的开发人员还是正在探索 TypeScript，您都将获得构建强大应用程序的宝贵见解。

什么是设计模式？

设计模式是针对常见设计问题的可重复使用的解决方案。它们主要分为三类：

创建模式：处理对象创建。

结构模式：关注对象组成。

行为模式：关注对象交互。

TypeScript 中的创建型设计模式

**1. 单例模式**

确保一个类在整个应用程序中只有一个实例。

**用例**：管理全局状态或配置。

**执行：**

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. 工厂方法**

创建对象而不指定其确切的类别。

**用例**：当需要抽象对象创建逻辑时。

**执行：**

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. 建造者模式**

将对象的构造与其表示分开。

**用例**：逐步构建复杂对象。

**执行：**

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();

TypeScript 中的结构设计模式

**1. 适配器模式**

将一个类的接口转换为另一个接口。

**用例**：集成第三方库。

**执行：**

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. 复合模式**

将对象组成树结构来表示部分-整体层次结构。

**用例**：管理分层数据。

**执行：**

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());

TypeScript 中的行为设计模式

**1.观察者模式**

定义对象之间的依赖关系，以便一个对象改变状态时，所有依赖者都会收到通知。

**用例**：事件系统。

**执行：**

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. 策略模式**

定义一系列算法并使它们可以互换。

**用例**：支付方式或排序算法。

**执行：**

interface Strategy {
  execute(a: number, b: number): number;
}

class AddStrategy implements Strategy {
  execute(a: number, b: number): number {
    return a + b;
  }
}

class MultiplyStrategy implements Strategy {
  execute(a: number, b: number): number {
    return a * b;
  }
}

class Context {
  constructor(private strategy: Strategy) {}

  executeStrategy(a: number, b: number): number {
    return this.strategy.execute(a, b);
  }
}

// Usage
const addContext = new Context(new AddStrategy());
console.log(addContext.executeStrategy(2, 3)); // 5

在最后，，，

设计模式是构建可扩展、可维护应用程序的强大工具。TypeScript 强大的类型系统和现代语法为有效实现这些模式提供了一个极好的平台。通过理解和应用这些设计模式，开发人员可以创建经得起时间考验的架构良好的软件解决方案。

我们下篇文章再见，小伙子！！！

我的个人网站：https://shafayet.zya.me

糟糕的设置😭

CLIS.CC

TypeScript 中的高级设计模式

什么是设计模式？

TypeScript 中的创建型设计模式

TypeScript 中的结构设计模式

TypeScript 中的行为设计模式

在最后，，，