javascript - 有没有办法在 typescript 类中生成 getter 和 setter 对？

Question

我有很多代码块，它们非常相似，如下所示:

// BLOCK 1
get computed1() {
  return this.dataComputed1;
}
set computed1(value: any) {
  update(value);
}

// BLOCK 2
get computed2() {
  return this.dataComputed2;
}
set computed2(value: any) {
  update(value);
}

...

现在，看到“BLOCK 1”和“BLOCK 2”非常相似(断章取义，当然如果我们将其视为文本)。我想知道是否有办法通过引入某种代码生成器(类似于 scss mixins)来转换此代码:

// BLOCK 1
makeComputed('computed1');

// BLOCK 2
makeComputed('computed2');

...

Answer 1

下面是使用 Object.defineProperty 定义 getter 和 setter 的示例

class Foo {
}

function makeComputed(prop) {
    const field = `data${prop}`;
    Object.defineProperty(Foo.prototype, prop, {
        get: function () {
            console.log(`getting ${field}`);
            return this[field];
        },
        set: function (value) {
            console.log(`updating ${field}`);
            this[field] = value;
        },
        enumerable: true,
        configurable: true
    });
}

makeComputed('computed1');
makeComputed('computed2');

const foo = new Foo();

foo.computed1 = 123;
console.log(foo.computed1);

注意 - 访问这样的属性(最后两行)将导致 Typescript 出错，因为它不知道 Foo 现在有 compulated1 和 compated2 属性。