TypeScript装饰器与箭头函数不兼容问题及相关技术咨询

首先得明确为什么你的performaceLog装饰器没法和箭头函数配合——这是类中箭头函数的本质特性导致的：

类里定义的箭头函数是实例属性，它会在类的构造函数执行时（也就是实例创建时）才被赋值给每个实例；而TypeScript装饰器是在类定义阶段（构造函数执行前）运行的，这时候实例还没生成，装饰器只能访问类的原型，根本找不到箭头函数的定义。另外，箭头函数的this是词法绑定的，也没法像普通方法那样通过装饰器修改执行上下文。

下面给你几种可行的解决方案，按需选择：

方案一：改用普通类方法（最推荐） #

如果业务场景允许，直接把箭头函数改成普通类方法，这样你的原装饰器几乎不需要修改就能正常工作——因为普通方法是挂载在类原型上的，装饰器可以直接拿到它的属性描述符：

// 你的原performaceLog装饰器可以直接用（补全剩余逻辑）
export function performaceLog(...args: any[]) { 
  return (target: Object, key: string, descriptor: TypedPropertyDescriptor<any>) => { 
    const msg = args.length ? args.join(' ') : '函数执行耗时';
    const originalMethod = descriptor.value;

    descriptor.value = function (...fnArgs: any[]) {
      const startTime = performance.now();
      const result = originalMethod.apply(this, fnArgs);
      const endTime = performance.now();

      console.log(`${msg}: ${endTime - startTime}ms`);
      console.log('执行结果:', result);
      console.log('装饰器参数:', args);
      
      return result;
    };

    return descriptor;
  };
}

// 使用方式：普通方法加装饰器
class MyService {
  @performaceLog("数据处理")
  processData() {
    // 模拟耗时操作
    for (let i = 0; i < 1e8; i++) {}
    return "处理完成";
  }
}

const service = new MyService();
service.processData(); // 会输出耗时、结果和装饰器参数

方案二：修改装饰器适配箭头函数实例属性 #

如果必须使用箭头函数（比如需要固定this指向），可以修改装饰器逻辑，通过拦截类的构造函数，在实例创建时动态包装箭头函数：

export function performaceLog(...args: any[]) {
  return function (target: any, key: string) {
    // 保存类定义时的原始箭头函数模板
    const originalArrowFunc = target[key];
    // 拿到类的原构造函数
    const originalConstructor = target.constructor;

    // 重写类的构造函数
    target.constructor = function (...ctorArgs: any[]) {
      // 创建原实例
      const instance = new originalConstructor(...ctorArgs);
      // 获取实例上的箭头函数（已经绑定了this）
      const instanceFunc = instance[key];

      // 包装箭头函数，添加耗时统计逻辑
      instance[key] = function (...fnArgs: any[]) {
        const startTime = performance.now();
        // 箭头函数的this已经绑定，这里apply不影响，但保持调用一致性
        const result = instanceFunc.apply(this, fnArgs);
        const endTime = performance.now();

        const msg = args.length ? args.join(' ') : `${key} 执行耗时`;
        console.log(`${msg}: ${endTime - startTime}ms`);
        console.log('执行结果:', result);
        console.log('装饰器参数:', args);

        return result;
      };

      return instance;
    };

    // 保持原型链，避免instanceof判断失效
    Object.setPrototypeOf(target.constructor, originalConstructor.prototype);
    Object.defineProperty(target.constructor, 'name', { value: originalConstructor.name });
  };
}

// 使用方式：箭头函数加装饰器
class MyService {
  @performaceLog("箭头函数耗时统计")
  fetchData = () => {
    // 模拟异步耗时操作
    return new Promise(resolve => {
      setTimeout(() => resolve("数据获取成功"), 1500);
    });
  };
}

const service = new MyService();
service.fetchData(); // 会输出耗时、结果和装饰器参数

方案三：类装饰器批量处理所有箭头函数 #

如果你的类里有多个箭头函数需要添加耗时统计，可以用类装饰器批量处理，不用给每个箭头函数单独加装饰器：

export function performanceLogClass(...args: any[]) {
  return function (target: any) {
    const originalConstructor = target;

    target = function (...ctorArgs: any[]) {
      const instance = new originalConstructor(...ctorArgs);

      // 遍历实例的所有属性，筛选出箭头函数（非原型方法的函数）
      Object.keys(instance).forEach(key => {
        const value = instance[key];
        if (typeof value === 'function' && !originalConstructor.prototype.hasOwnProperty(key)) {
          // 包装函数
          instance[key] = function (...fnArgs: any[]) {
            const startTime = performance.now();
            const result = value.apply(this, fnArgs);
            const endTime = performance.now();

            const msg = args.length ? args.join(' ') : `${key} 执行耗时`;
            console.log(`${msg}: ${endTime - startTime}ms`);
            console.log('执行结果:', result);
            console.log('装饰器参数:', args);

            return result;
          };
        }
      });

      return instance;
    };

    // 维护原型链和类名，避免破坏原有行为
    Object.setPrototypeOf(target, originalConstructor.prototype);
    Object.defineProperty(target, 'name', { value: originalConstructor.name });

    return target;
  };
}

// 使用方式：给类加装饰器
@performanceLogClass("类内所有箭头函数统计")
class MyService {
  fetchData = () => {
    return new Promise(resolve => setTimeout(() => resolve("数据"), 1000));
  };

  processData = () => {
    for (let i = 0; i < 1e8; i++) {}
    return "处理完成";
  };
}

const service = new MyService();
service.fetchData();
service.processData(); // 两个函数都会输出耗时统计

注意事项 #

1. 方案二和方案三都是通过修改构造函数实现的，所以只有修改装饰器后创建的实例才会生效，之前创建的实例不受影响
2. 如果类涉及继承，需要额外注意构造函数的原型链处理，避免子类行为异常
3. 箭头函数的this已经固定绑定到实例，所以包装后的函数不需要再处理this丢失问题

内容的提问来源于stack exchange，提问作者Shreyas Patil