TypeScript方法装饰器中originalMethod.apply参数为何为undefined？

这不是TypeScript的bug，问题出在装饰器内部对originalMethod.apply的参数传递逻辑上。

错误示例（导致参数undefined的写法） #

function FaultyDecorator() {
  return function(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function() {
      // 遗漏了调用时传入的参数
      originalMethod.apply(this);
    };
    return descriptor;
  };
}

class Demo {
  @FaultyDecorator()
  printArg(arg: string) {
    console.log("原方法参数:", arg); // 输出undefined
  }
}

const demo = new Demo();
demo.printArg("测试参数");

正确实现（传递参数的写法） #

要解决这个问题，需要将装饰器重写后的方法接收到的所有参数，传递给originalMethod.apply的第二个参数（参数数组）：

function WorkingDecorator() {
  return function(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function(...args: any[]) {
      // 显式传递参数数组给原方法
      originalMethod.apply(this, args);
    };
    return descriptor;
  };
}

class Demo {
  @WorkingDecorator()
  printArg(arg: string) {
    console.log("原方法参数:", arg); // 输出测试参数
  }
}

const demo = new Demo();
demo.printArg("测试参数");

核心原因 #

Function.prototype.apply的第二个参数是原方法执行时的参数列表，必须显式传递。如果省略这个参数，原方法的形参就会被赋值为undefined。装饰器重写方法时，必须收集调用时传入的所有参数（通过剩余参数...args或arguments对象），并传递给原方法。

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