打字稿装饰器和这个上下文

Question

我通过以下方式在 typescript/angular 中使用装饰器

export function Field({source}){
  return (target, property) => {
    // Some code here
  }
}

那我想这样用

 export class MyClass {

  constructor(private myService: MyService) {}

  @Field({source: () => this.myFn()})
  myProp: string;

  private myFn() { 
   // another code 
   return this.myService.get()
  }
}

显然上下文是错误的，“this”不是指 MyClass 的实例。 将此上下文与 MyClass 实例链接的最佳方法是什么？

Answer 1

您可以使用迂回方法访问装饰器中的实例，具体取决于您要执行的操作。在下面的示例中，每次设置属性时都会调用传递给装饰器的函数。

装饰器适用于属性和字段。如果正在修饰字段，则修改目标的原型并将字段转换为具有隐藏支持变量的属性以存储属性值。

请注意，它如何不使用箭头函数来定义 getter 和 setter。这就是在设置属性/字段时可以检索实例的方式。就我个人而言，我经常使用箭头函数，以至于在我尝试之前，我什至忘记了这样的事情。

function Field(srcFunc) {
  return function (target: any, propertyKey: string, descriptor?: PropertyDescriptor) {
    if (descriptor == null) {
      const backingKey = `__${propertyKey}`;
      Object.defineProperty(target, backingKey, { enumerable: false, writable: true });
      Object.defineProperty(target, propertyKey, {
        configurable: true,
        enumerable: true,
        get: function() {
          return this[backingKey];
        },
        set: function(value) {
          this[backingKey] = value;
          srcFunc.call(this);
        }
      });
    }
    else {
      const setOriginal = descriptor.set;
      descriptor.set = function(value) {
        setOriginal.call(this, value);
        srcFunc.call(this);
      }
    }
  }
}

export class MyClass {

  @Field(MyClass.prototype.myFn)
  myProp: string;

  private myFn() { 
   // another code 
  }
}