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);
}

...

现在，看到“第1块”和“第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现在有computed1和{{ 1}}道具。

Answer 2

对于您的问题，没有任何简单的快捷解决方案，您需要通过if / else或switch语句来处理每个请求

function makeComputer(op) {
  switch (op) {
    case 'computed1':
      // logic
      break;
    case 'computer2':
      // logic
      break;
    default:
      // logic
  }
}

我选择的一个好模式是Microsoft Dynamics的“ parm”。它结合了getter设置器，并结合了上述方法，您将可以在一个函数中处理get / set和operation查找。

function parmX(x) {
  if (x) this.x = x;
  else return this.x;
}

有没有办法在Typescript类中生成getter和setter对？

2 个答案: