第三十六章：TypeScript中的设计模式-TypeScript 全面进阶指南

当前位置:　首页>> 技术小册>> TypeScript 全面进阶指南

### 第三十六章：TypeScript中的设计模式

在软件开发领域，设计模式是解决常见软件设计问题的可复用解决方案。它们代表了软件工程中最佳实践的集合，旨在提高代码的可读性、可维护性和可扩展性。TypeScript，作为JavaScript的超集，不仅继承了JavaScript的动态特性和灵活性，还通过静态类型检查增强了代码的安全性和可预测性。将设计模式与TypeScript结合使用，可以进一步提升项目的质量和开发效率。本章将深入探讨几种在TypeScript项目中常见且有用的设计模式。

#### 36.1 引言

设计模式通常分为三大类：创建型模式、结构型模式和行为型模式。每种类型解决不同方面的问题，从对象的创建到对象间的组合，再到对象间的通信。在TypeScript中，这些模式的应用不仅保留了原有的设计思想，还通过类型系统得到了强化。

#### 36.2 创建型模式

**36.2.1 工厂模式（Factory Pattern）**

工厂模式用于创建对象，而不将具体类的实例化逻辑暴露给客户端。在TypeScript中，可以利用接口和类来定义抽象工厂和产品，并通过工厂类来封装对象的创建逻辑。

```typescript
interface Product {
    operation(): string;
}

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

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

class Factory {
    static createProduct(type: string): Product {
        if (type === 'A') {
            return new ConcreteProductA();
        } else if (type === 'B') {
            return new ConcreteProductB();
        }
        throw new Error('Invalid type');
    }
}

const productA = Factory.createProduct('A');
console.log(productA.operation()); // 输出：Result of ConcreteProductA
```

**36.2.2 抽象工厂模式（Abstract Factory Pattern）**

抽象工厂模式提供了一种创建一系列相关或相互依赖对象的接口，而无需指定它们具体的类。在TypeScript中，可以通过抽象类和接口的组合来实现。

```typescript
interface AbstractProductA {
    use(): void;
}

class ProductA1 implements AbstractProductA {
    use(): void {
        console.log('ProductA1 is being used');
    }
}

class ProductA2 implements AbstractProductA {
    use(): void {
        console.log('ProductA2 is being used');
    }
}

interface AbstractFactory {
    createProductA(): AbstractProductA;
}

class ConcreteFactory1 implements AbstractFactory {
    createProductA(): AbstractProductA {
        return new ProductA1();
    }
}

class ConcreteFactory2 implements AbstractFactory {
    createProductA(): AbstractProductA {
        return new ProductA2();
    }
}

const factory1 = new ConcreteFactory1();
const productA1 = factory1.createProductA();
productA1.use(); // 输出：ProductA1 is being used
```

#### 36.3 结构型模式

**36.3.1 适配器模式（Adapter Pattern）**

适配器模式允许将一个类的接口转换成客户端所期待的另一个接口形式，使因接口不兼容而不能一起工作的类可以一起工作。

```typescript
interface Target {
    request(): string;
}

class Adaptee {
    specificRequest(): string {
        return "Call to specificRequest()";
    }
}

class Adapter implements Target {
    private adaptee: Adaptee;

constructor(adaptee: Adaptee) {
        this.adaptee = adaptee;
    }

request(): string {
        return this.adaptee.specificRequest();
    }
}

const adaptee = new Adaptee();
const adapter = new Adapter(adaptee);
console.log(adapter.request()); // 输出：Call to specificRequest()
```

**36.3.2 代理模式（Proxy Pattern）**

代理模式为其他对象提供一种代理以控制对这个对象的访问。在TypeScript中，可以利用类的继承或高阶函数（函数式编程）来实现。

```typescript
interface Image {
    display(): void;
}

class RealImage implements Image {
    private filename: string;
    private loaded: boolean = false;

constructor(filename: string) {
        this.filename = filename;
        this.loadFromDisk(filename);
    }

loadFromDisk(filename: string): void {
        // 模拟加载图片
        console.log('Loading ' + filename);
        this.loaded = true;
    }

display(): void {
        if (this.loaded) {
            console.log('Displaying ' + this.filename);
        } else {
            console.log(this.filename + ' not available.');
        }
    }
}

class ProxyImage implements Image {
    private realImage: RealImage | null = null;
    private filename: string;

constructor(filename: string) {
        this.filename = filename;
    }

display(): void {
        if (this.realImage === null) {
            this.realImage = new RealImage(this.filename);
            // 可以添加延迟加载逻辑
        }
        this.realImage.display();
    }
}

const proxyImage = new ProxyImage("test.jpg");
proxyImage.display(); // 加载并显示图片
```

#### 36.4 行为型模式

**36.4.1 观察者模式（Observer Pattern）**

观察者模式定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象。这个主题对象在状态发生变化时，会通知所有观察者对象，使它们能够自动更新自己。

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

class ConcreteObserverA implements Observer {
    update(message: string): void {
        console.log(`ObserverA received: ${message}`);
    }
}

class ConcreteObserverB implements Observer {
    update(message: string): void {
        console.log(`ObserverB received: ${message}`);
    }
}

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

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

unsubscribe(observer: Observer): void {
        this.observers = this.observers.filter(obs => obs !== observer);
    }

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

const subject = new Subject();
const observerA = new ConcreteObserverA();
const observerB = new ConcreteObserverB();

subject.subscribe(observerA);
subject.subscribe(observerB);

subject.notify("Hello Observers!");
// 输出：
// ObserverA received: Hello Observers!
// ObserverB received: Hello Observers!
```

**36.4.2 策略模式（Strategy Pattern）**

策略模式定义了一系列的算法，并将每一个算法封装起来，使它们可以相互替换。策略模式让算法的变化独立于使用算法的客户。

```typescript
interface Strategy {
    execute(data: number): number;
}

class ConcreteStrategyA implements Strategy {
    execute(data: number): number {
        return data + 10;
    }
}

class ConcreteStrategyB implements Strategy {
    execute(data: number): number {
        return data * 2;
    }
}

class Context {
    private strategy: Strategy;

constructor(strategy: Strategy) {
        this.strategy = strategy;
    }

setStrategy(strategy: Strategy): void {
        this.strategy = strategy;
    }

executeStrategy(data: number): number {
        return this.strategy.execute(data);
    }
}

const context = new Context(new ConcreteStrategyA());
console.log(context.executeStrategy(5)); // 输出：15

context.setStrategy(new ConcreteStrategyB());
console.log(context.executeStrategy(5)); // 输出：10
```

#### 36.5 总结

在TypeScript中运用设计模式，可以显著提高代码的可读性、可维护性和可扩展性。通过类型系统，TypeScript能够在编译时期就捕获到许多潜在的错误，进一步保障了代码的健壮性。本章介绍了几种在TypeScript项目中常用的设计模式，包括工厂模式、抽象工厂模式、适配器模式、代理模式、观察者模式和策略模式。每种模式都有其独特的适用场景和优势，在实际开发中应根据具体需求灵活选择和运用。通过不断实践和学习，开发者可以更加熟练地掌握这些设计模式，从而编写出更高质量的TypeScript代码。

该分类下的相关小册推荐：

TypeScript开发实战

剑指TypeScript

TypeScript入门指南