TypeScript 语言装饰器的设计模式应用

阿木博主一句话概括：TypeScript^【1】装饰器^【2】：设计模式^【3】的艺术应用

阿木博主为你简单介绍：
TypeScript 作为 JavaScript 的超集，提供了丰富的装饰器功能，这些装饰器可以用来扩展类、方法、访问器、属性和参数的功能。装饰器是 TypeScript 中一种强大的设计模式，它允许开发者在不修改原有代码结构的情况下，对代码进行扩展和增强。本文将围绕 TypeScript 装饰器的设计模式应用，展开探讨。

一、

随着前端技术的发展，代码的可维护性^【4】和可扩展性^【5】变得越来越重要。装饰器作为一种设计模式，在 TypeScript 中得到了广泛应用。本文将详细介绍装饰器的设计模式，并通过实际案例展示其在 TypeScript 中的应用。

二、装饰器概述

1. 装饰器的概念

装饰器是一种特殊类型的声明，它能够被附加到类声明、方法、访问器、属性或参数上。装饰器可以修改类的行为，也可以在运行时提供额外的功能。

2. 装饰器的类型

TypeScript 中主要有以下几种装饰器：

- 类装饰器^【6】：用于装饰类本身。
- 方法装饰器^【7】：用于装饰类的方法。
- 访问器装饰器^【8】：用于装饰类的访问器（getter 和 setter）。
- 属性装饰器^【9】：用于装饰类的属性。
- 参数装饰器^【10】：用于装饰类的方法或访问器的参数。

三、装饰器的设计模式应用

1. 单例模式^【11】

单例模式是一种常用的设计模式，用于确保一个类只有一个实例，并提供一个访问它的全局访问点。以下是一个使用装饰器实现单例模式的示例：

typescript function Singleton(target: Function) { let instance: any; target.prototype.getInstance = function () { if (!instance) { instance = new target(); } return instance; }; }


@Singleton

class Database {

  constructor() {

    console.log('Database instance created');

  }

}

const db1 = Database.getInstance(); const db2 = Database.getInstance(); console.log(db1 === db2); // 输出：true

2. 观察者模式^【12】

观察者模式允许对象在状态变化时通知其他对象。以下是一个使用装饰器实现观察者模式的示例：

typescript function Observer(target: Function) { let observers: Function[] = []; target.prototype.addObserver = function (observer: Function) { observers.push(observer); };


  target.prototype.notifyObservers = function () {

    observers.forEach(observer => observer());

  };

}
@Observer

class Subject {

  private data: any;
  constructor(data: any) {

    this.data = data;

  }
  getData(): any {

    return this.data;

  }
  setData(data: any): void {

    this.data = data;

    this.notifyObservers();

  }

}
class Observer1 {

  update(data: any): void {

    console.log('Observer1: Data changed to', data);

  }

}
class Observer2 {

  update(data: any): void {

    console.log('Observer2: Data changed to', data);

  }

}
const subject = new Subject('Initial data');

subject.addObserver(new Observer1());

subject.addObserver(new Observer2());

subject.setData('New data');

3. 装饰器组合模式^【13】

装饰器组合模式允许将多个装饰器应用于同一个目标，从而实现更复杂的逻辑。以下是一个使用装饰器组合模式的示例：

typescript function Log(target: any, propertyKey: string, descriptor: PropertyDescriptor) { const originalMethod = descriptor.value; descriptor.value = function () { console.log(`Method ${propertyKey} called with arguments:`, arguments); return originalMethod.apply(this, arguments); }; }


function Validate(target: any, propertyKey: string, descriptor: PropertyDescriptor) {

  const originalMethod = descriptor.value;

  descriptor.value = function (value: any) {

    if (value < 0) {

      throw new Error('Value must be non-negative');

    }

    return originalMethod.apply(this, [value]);

  };

}
class Calculator {

  @Log

  @Validate

  add(a: number, b: number): number {

    return a + b;

  }

}