如果装饰器作为高阶函数返回，打字稿类装饰器无法访问静态值

Question

这是一个演示：

function Bar(FooClass: Foo) {
  console.log('in Bar decorator');

  return function (args) {
    console.log('in Bar high order function: ', args);
    let foo = new FooClass();
  }
}

@Bar
class Foo {

  a = 1;
  static b = 2;

  constructor(args) {
    console.log('in Foo constructor')
    console.log('Foo instance a: ', this.a);
    console.log('Foo static b: ', Foo.b);
  }
}

new Foo(123);

当我编译并运行代码时，它会打印：

in Bar decorator
in Bar high order function:  123
in Foo constructor
Foo instance a:  1
Foo static b:  undefined

我知道我可以通过FooClass.b 访问高阶函数中的静态值b。但在Foo的实例中似乎无法访问它。

Answer 1

装饰器的工作方式是，如果你从装饰器返回一个值，它将替换被装饰的类。您返回的函数可以成功替换Foo，但由于它不继承原始Foo 的属性，因此在替换后的Foo 上将不可用。

最简单的解决方案是返回一个派生自传递给装饰器的类的匿名类。

function Bar(FooClass: typeof Foo) {
    console.log('in Bar decorator');
    return class extends FooClass {
        constructor(args: any) {
            super(args);
            console.log('in Bar high order function: ', args);
        }
    };
}

@Bar
class Foo {

    a = 1;
    static b = 2;
    constructor(args: any) {
        console.log('in Foo constructor')
        console.log('Foo instance a: ', this.a);
        console.log('Foo static b: ', Foo.b);
    }
}

new Foo(123);