TypeScript 装饰器妙用探索：方法与属性装饰器

2023-12-30 23:18:17

在软件开发领域，装饰器（Decorator）是一种重要的设计模式，它允许我们在不修改类或方法的源代码的情况下，为它们添加新的功能或改变其行为。TypeScript 中的装饰器也是如此，它提供了一种简单而强大的方式来增强类的功能。

方法装饰器

1. 定义

顾名思义，方法装饰器就是用来修饰类方法的装饰器。它允许我们在方法定义之前或之后执行一些操作，从而改变方法的行为。

2. 示例

让我们通过一个简单的示例来演示方法装饰器的用法：

// 装饰器函数
function logMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  // 重新定义方法
  descriptor.value = function (...args: any[]) {
    console.log(`Calling ${propertyKey} with arguments: ${args}`);

    // 调用原始方法
    const result = originalMethod.apply(this, args);

    console.log(`Method ${propertyKey} returned: ${result}`);

    return result;
  };
}

// 使用装饰器
class MyClass {
  @logMethod
  sum(a: number, b: number): number {
    return a + b;
  }
}

// 创建 MyClass 实例并调用 sum 方法
const myClassInstance = new MyClass();
myClassInstance.sum(1, 2);

在这个示例中，我们定义了一个装饰器函数 logMethod，它会在方法调用前和调用后打印一些日志。然后，我们使用 @logMethod 装饰器修饰了 MyClass 类的 sum 方法。当我们调用 sum 方法时，它会先执行装饰器函数 logMethod 中的代码，然后再执行 sum 方法本身。这样，我们就可以在控制台中看到 sum 方法的调用过程和返回值。

3. 方法拦截器

方法装饰器的一个常见应用场景是实现方法拦截器（Method Interceptor）。方法拦截器允许我们在方法执行前后插入额外的逻辑，从而实现诸如日志记录、性能分析、安全检查等功能。

4. 底层实现

在 TypeScript 中，方法装饰器的底层实现是通过修改类原型的 __proto__ 属性来实现的。当我们使用装饰器修饰一个方法时，装饰器函数会修改类的原型，并在其中添加一个新的属性，该属性的值是一个代理函数。当我们调用这个方法时，实际上是调用了代理函数。代理函数会在方法执行前后执行一些额外的逻辑，然后调用原始方法。

属性装饰器

1. 定义

属性装饰器顾名思义，它用于修饰类属性。它允许我们在属性声明之前或之后执行一些操作，从而改变属性的行为。

2. 示例

让我们通过一个简单的示例来演示属性装饰器的用法：

// 装饰器函数
function readonly(target: any, propertyKey: string) {
  // 修改属性的访问器属性
  const descriptor = Object.getOwnPropertyDescriptor(target, propertyKey);
  descriptor.writable = false;

  // 重新定义属性的访问器属性
  Object.defineProperty(target, propertyKey, descriptor);
}

// 使用装饰器
class MyClass {
  @readonly
  name: string;

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

// 创建 MyClass 实例并访问 name 属性
const myClassInstance = new MyClass('John Doe');
console.log(myClassInstance.name); // John Doe

// 尝试修改 name 属性
myClassInstance.name = 'Jane Doe';
console.log(myClassInstance.name); // John Doe

在这个示例中，我们定义了一个装饰器函数 readonly，它将把属性设置为只读。然后，我们使用 @readonly 装饰器修饰了 MyClass 类的 name 属性。当我们创建 MyClass 实例并访问 name 属性时，我们可以看到它已经是一个只读属性了。即使我们尝试修改它，它的值也不会改变。