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

我知道我可以通过b访问高阶函数中的静态值FooClass.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);

如果decorator返回为高阶函数，则typescript类装饰器无法访问静态值

1 个答案: