TypeScript 装饰器常见问题及解决方法 | 详细指南

在使用 TypeScript 装饰器时，可能会遇到一些常见问题。以下是一些常见的错误及其解决方法：

1. 装饰器语法错误

• 问题描述：TypeScript 装饰器语法错误，通常是因为装饰器的使用方式不正确。

• 解决方法：

  • 确保装饰器函数签名正确。装饰器函数通常接受三个参数：target、propertyKey 和 descriptor。
  • 确保装饰器在类、方法、属性或参数上正确使用。

  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);
      };
      return descriptor;
  }
  
  class MyClass {
      @log
      myMethod(arg: string) {
          console.log(arg);
      }
  }
  

2. 装饰器顺序问题

• 问题描述：多个装饰器的执行顺序可能会导致意外的行为。

• 解决方法：

  • 装饰器的执行顺序是从上到下，从外到内。确保装饰器的顺序符合预期。
  • 如果需要特定的执行顺序，可以通过调整装饰器的位置来控制。

  function first() {
      console.log("first(): factory evaluated");
      return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
          console.log("first(): called");
      };
  }
  
  function second() {
      console.log("second(): factory evaluated");
      return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
          console.log("second(): called");
      };
  }
  
  class MyClass {
      @first()
      @second()
      method() {}
  }
  

3. 装饰器类型错误

• 问题描述：装饰器类型不匹配，导致 TypeScript 编译错误。

• 解决方法：

  • 确保装饰器的类型与目标（类、方法、属性或参数）匹配。
  • 使用正确的装饰器类型签名。

  function classDecorator<T extends { new(...args: any[]): {} }>(constructor: T) {
      return class extends constructor {
          newProperty = "new property";
          hello = "override";
      };
  }
  
  @classDecorator
  class MyClass {
      public property = "property";
      public hello: string;
      constructor(m: string) {
          this.hello = m;
      }
  }
  

4. 装饰器与元数据反射

• 问题描述：在使用装饰器时，可能需要使用元数据反射 API（如 reflect-metadata），但未正确配置。

• 解决方法：

  • 确保在项目中安装了 reflect-metadata 包，并在入口文件中导入。
  • 在 tsconfig.json 中启用 emitDecoratorMetadata 选项。

  npm install reflect-metadata
  

  import "reflect-metadata";
  
  function logType(target: any, key: string) {
      const type = Reflect.getMetadata("design:type", target, key);
      console.log(`${key} type: ${type.name}`);
  }
  
  class MyClass {
      @logType
      public myProperty: string;
  }
  

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

5. 装饰器与作用域问题

• 问题描述：装饰器中的 this 指向问题，导致方法调用时出现错误。

• 解决方法：

  • 在装饰器中使用 descriptor.value 时，确保正确绑定 this。

  function bind(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
      const originalMethod = descriptor.value;
      return {
          configurable: true,
          get() {
              return originalMethod.bind(this);
          }
      };
  }
  
  class MyClass {
      @bind
      myMethod() {
          console.log(this);
      }
  }
  
  const instance = new MyClass();
  const method = instance.myMethod;
  method(); // `this` 指向正确
  

6. 装饰器与继承

• 问题描述：装饰器在继承类中的行为可能不符合预期。

• 解决方法：

  • 确保装饰器在继承链中的行为符合预期。如果需要，可以在装饰器中处理继承逻辑。

  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);
      };
      return descriptor;
  }
  
  class ParentClass {
      @log
      myMethod() {
          console.log("Parent method");
      }
  }
  
  class ChildClass extends ParentClass {
      myMethod() {
          super.myMethod();
          console.log("Child method");
      }
  }
  
  const instance = new ChildClass();
  instance.myMethod();
  

通过以上方法，可以解决大多数 TypeScript 装饰器使用中的常见问题。如果问题依然存在，建议检查 TypeScript 版本、编译器配置以及相关依赖库的版本兼容性。