前端面试题135（请解释一下在TypeScript中如何实现装饰器（Decorators），并分享一个在项目中使用装饰器的示例）

TypeScript 中的装饰器

装饰器是一种特殊类型的声明，它可以被附加到类声明、方法、访问器、属性或参数上。装饰器使用函数进行实施，这些函数可以在运行时修改类的行为或注册类的行为。

装饰器的定义

装饰器是一种特殊的声明，它能够增强类、方法、属性或参数的功能。在TypeScript中，装饰器是通过在目标声明前加上@decoratorName这样的语法来使用的。

类装饰器

类装饰器接收三个参数：

• target: 类的构造函数。

方法装饰器

方法装饰器接收三个参数：

• target: 类的原型对象。
• propertyKey: 方法的名字。
• descriptor: 属性描述符。

属性装饰器

属性装饰器接收两个参数：

• target: 类的原型对象。
• propertyKey: 属性的名字。

参数装饰器

参数装饰器接收四个参数：

• target: 类的原型对象。
• propertyKey: 方法的名字。
• parameterIndex: 参数在方法参数列表中的位置。

示例：使用装饰器记录方法调用次数

假设我们有一个简单的类，其中包含一个方法，我们想要记录该方法被调用了多少次。我们可以使用装饰器来实现这一功能。

定义装饰器

首先，我们需要定义一个装饰器函数，该函数接收上述的三个参数，并返回一个新的属性描述符。

function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(`Calling "${propertyKey}" with`, args);
    return originalMethod.apply(this, args);
  };

  // 保留原始方法的元数据
  descriptor.value.toString = function () {
    return originalMethod.toString();
  };

  return descriptor;
}

应用装饰器

接下来，我们可以在类的方法上应用这个装饰器。

class MyClass {
  private count = 0;

  @log
  doSomething() {
    this.count++;
    console.log(`Called ${this.count} times`);
  }
}

const instance = new MyClass();
instance.doSomething(); // 输出: Calling "doSomething" with []
                        // Called 1 times
instance.doSomething(); // 输出: Calling "doSomething" with []
                        // Called 2 times

在这个例子中，log装饰器接收方法的描述符，并替换方法体，以便在每次调用方法时输出一条日志消息。这种方法可以方便地扩展到记录其他信息，比如方法执行时间或者方法调用的上下文信息。

总结

装饰器是TypeScript中非常强大的特性，可以用来在编译时或运行时修改类的行为。通过上面的例子可以看到，装饰器可以帮助我们在不修改原方法的情况下添加额外的功能，比如日志记录、性能监控等，从而提高了代码的可维护性和灵活性。