TypeScript的5种设计模式分别是什么
更新时间：2023-07-14
## 简介
TypeScript 是微软开发的一种编程语言。它是 JavaScript 的一个超集，支持 ECMAScript 标准，并加入了很多新的特性。TypeScript 最显著的特点是提供了静态类型检查，这能够在代码编写过程中避免一些错误的出现。
设计模式是软件开发中常用的一种架构模式，它应用了通用的解决方案。在这个文章里，我将会探讨 TypeScript 中的五种常见的设计模式。
## 单例模式
单例模式是一种创建型模式，它保证某一类的一个唯一实例。在 TypeScript 中，我们可以使用类来实现这种模式。
```typescript
class Singleton {
private static instance: Singleton;
private constructor() {}
public static getInstance(): Singleton {
if (!Singleton.instance) {
Singleton.instance = new Singleton();
}
return Singleton.instance;
}
public someMethod() {
console.log("Some Method");
}
}
const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // true
instance1.someMethod(); // Some Method
```
在这个示例中，`getInstance` 方法被用来获取实例。在第一次调用时，会创建一个实例，之后的每次调用会返回相同的实例，这能够确保该类只有一个实例。
## 工厂模式
工厂模式是一种创建型模式，它为我们提供了一个方法来获取实例化某些类型的对象。在 TypeScript 中，我们可以定义一个工厂类来创建对象。
```typescript
interface Person {
name: string;
age: number;
}
class Employee implements Person {
constructor(public name: string, public age: number, public salary: number) {}
}
class Manager implements Person {
constructor(public name: string, public age: number, public bonus: number) {}
}
class PersonFactory {
public static createEmployee(name: string, age: number, salary: number): Employee {
return new Employee(name, age, salary);
}
public static createManager(name: string, age: number, bonus: number): Manager {
return new Manager(name, age, bonus);
}
}
const employee = PersonFactory.createEmployee("Alice", 25, 5000);
console.log(employee.name); // Alice
const manager = PersonFactory.createManager("Bob", 35, 10000);
console.log(manager.name); // Bob
```
在这个示例中，我们定义了 `Person` 接口和两个实现它的类，`Employee` 和 `Manager`。我们还创建了一个工厂类，它让我们能够实例化这两种类型的对象。这个 `PersonFactory` 类的两个方法，`createEmployee` 和 `createManager`，分别返回一个新的 `Employee` 或 `Manager` 类型的对象。
## 适配器模式
适配器模式是一种结构型模式，它允许类能够兼容不同接口。在 TypeScript 中，我们可以使用适配器来适应不同的 API。
```typescript
interface Apple {
getWeight(): number;
}
class Macintosh implements Apple {
public getWeight() {
return 5;
}
}
interface Orange {
getWeightInGram(): number;
}
class Tangerine implements Orange {
public getWeightInGram() {
return 100;
}
}
class OrangeAdapter implements Apple {
constructor(private readonly orange: Orange) {}
public getWeight() {
const weightInGrams = this.orange.getWeightInGram();
return weightInGrams / 20;
}
}
const macintosh = new Macintosh();
console.log(macintosh.getWeight()); // 5
const tangerine = new Tangerine();
const orangeAdapter = new OrangeAdapter(tangerine);
console.log(orangeAdapter.getWeight()); // 5
```
在这个示例中，我们有一个 `Apple` 接口和两个实现它的类，`Macintosh` 和 `Tangerine`。`Macintosh` 实现了 `Apple` 接口中的 `getWeight` 方法，而 `Tangerine` 实现了一个和 `getWeight` 具有不同签名的 `getWeightInGram` 方法。我们还创建了一个适配器，`OrangeAdapter`，它实现了 `Apple` 接口，并且接收一个 `Orange` 对象。
## 观察者模式
观察者模式是一种行为型模式，它定义了一个一对多的依赖关系。当被观察者对象发生改变时，通知其依赖者。在 TypeScript 中，我们可以使用一个基类和一些接口来实现观察者模式。
```typescript
interface Observer {
update(): void;
}
class Subject {
private observers: Observer[] = [];
public attach(observer: Observer) {
this.observers.push(observer);
}
public detach(observer: Observer) {
this.observers = this.observers.filter((item) => item !== observer);
}
public notify() {
this.observers.forEach((observer) => observer.update());
}
}
class ConcreteObserver implements Observer {
constructor(private readonly subject: Subject) {}
public update() {
console.log(`${this.subject} is updated`);
}
}
const subject = new Subject();
const observer1 = new ConcreteObserver(subject);
const observer2 = new ConcreteObserver(subject);
subject.notify(); // Subject is updated
subject.detach(observer2);
subject.notify(); // Subject is updated
```
在这个示例中，我们定义了一个 `Observer` 接口和一个 `Subject` 类。`Subject` 类有一个数组，保存观察者对象。它的 `attach` 方法用来添加观察者， `detach` 方法用来删除观察者， `notify` 方法会通知所有观察者更新。我们还定义了一个实现了 `Observer` 接口的 `ConcreteObserver` 类，它在观察者更新时输出一条消息。
## 策略模式
策略模式是一种行为型模式，它定义了一系列算法，将它们各自封装，并且使它们可以相互替换。在 TypeScript 中，我们可以使用接口和类来实现该模式。
```typescript
interface SortingStrategy {
sort(arr: number[]): void;
}
class QuickSort implements SortingStrategy {
public sort(arr: number[]) {
console.log("QuickSort: ", arr.sort());
}
}
class BubbleSort implements SortingStrategy {
public sort(arr: number[]) {
console.log("BubbleSort: ", arr.sort());
}
}
class Sorter {
constructor(private readonly strategy: SortingStrategy) {}
public sort(arr: number[]) {
this.strategy.sort(arr);
}
}
const arr = [3, 1, 2, 6, 4, 5];
const sorter1 = new Sorter(new QuickSort());
sorter1.sort(arr); // QuickSort: [1, 2, 3, 4, 5, 6]
const sorter2 = new Sorter(new BubbleSort());
sorter2.sort(arr); // BubbleSort: [1, 2, 3, 4, 5, 6]
```
在这个示例中，我们定义了一个 `SortingStrategy` 接口和两个实现了它的类，`QuickSort` 和 `BubbleSort`。我们还定义了一个 `Sorter` 类，它接收一个 `SortingStrategy` 对象并在 `sort` 方法中执行排序操作。
