前端面试题111（如何在TypeScript中使用Decorators？请举例说明Decorators的应用场景）

在TypeScript中，装饰器是一种特殊类型的声明，可以被附加到类声明、方法、访问器、属性或参数上。装饰器使用@expression这种形式，expression求值后必须为一个函数，这个函数会在运行时被调用，被装饰的声明信息作为参数传入。

基本用法

首先，确保你的TypeScript配置支持装饰器。在tsconfig.json中设置：

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

示例：日志记录装饰器

下面是一个简单的装饰器示例，用于记录类的方法调用日志。

// 定义装饰器函数
function log(target: any, key: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

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

  return descriptor;
}

class MathCalculator {
  @log
  add(a: number, b: number): number {
    return a + b;
  }
}

const calculator = new MathCalculator();
console.log(calculator.add(2, 3));

在这个例子中，@log装饰器被应用到MathCalculator类的add方法上。每当add方法被调用时，装饰器会自动打印出调用信息和返回结果，而无需在方法内部手动添加日志代码。

应用场景

1. 日志记录：如上述示例，自动记录方法的调用信息，便于调试和监控。
2. 权限验证：可以在方法执行前检查用户是否有权限执行该操作。
3. 性能度量：测量方法的执行时间，帮助识别性能瓶颈。
4. 缓存：对计算密集型或IO操作的结果进行缓存，提高应用响应速度。
5. 类或属性的初始化：自动为类添加一些默认配置或初始化某些属性。

装饰器为开发者提供了一种强大的元编程能力，能够以更简洁、更抽象的方式修改或增强类和对象的行为。不过，使用时也需谨慎，过度使用可能导致代码难以理解和维护。