来自装饰器的动态设置器 - Typescript 抱怨只读属性答案

【问题标题】：Dynamic setter from decorator - Typescript complains about read-only property来自装饰器的动态设置器 - Typescript 抱怨只读属性
【发布时间】：2020-01-08 17:50:43
【问题描述】：

考虑以下代码：

function configurable(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    descriptor.set = (n: number) => {
        target[`_${propertyKey}`] = n * 100;
    };
}

class Test {
    _prop: number = 10;

    @configurable
    get prop(): number {
        return this.prop;
    }
}

const t = new Test();
t.prop = 100;

这是一个愚蠢的例子，我试图动态添加一个带有装饰器的设置器，但打字稿抱怨t.prop是只读的

【问题讨论】：

TS 编译器看不到装饰器添加了 setter，因为这是在运行时完成的。它看到只有一个 getter，所以它假定该属性是只读的。你能不能也生成getter，所以你只需要在课堂上写prop: number吗？

标签： typescript typescript-decorator

【解决方案1】：

以下代码可能对您有所帮助

function configurable(multiplierFactor: number) { 
    return function (target, propertyKey: string) {
      const privatePropName = `_${propertyKey}`;

      Object.defineProperty(target, propertyKey, {
          configurable: false,
          get: function (this) {
              return this[privatePropName];
          },
          set: function (this, value) {
            this[privatePropName] = value * multiplierFactor;
          },
      });
    }
}

class Test {
    @configurable(10)
    prop: number = 1;
}

const t = new Test();
console.log(t.prop) // 10
t.prop = 20;
console.log(t.prop) // 200

【讨论】：