typescript - 使用装饰器为实体属性生成通用 getter 和 setter

Question

我正在将模型实体转换为 Typescript(使用 ajax 调用填充它们)。我希望每个实体中的每个属性都有一个基本的 getter 和 setter:

entity.setProductID("2r3e4r4t5y6t5y6") and entity.getProductID()

目前，我正在为类中的每个属性定义这些方法

   /**
    *@name "productID"
    *@ormtype "string"
    *@length "32"
    *@fieldtype "id"
    *@generator "uuid"
    *@unsavedvalue ""
    */
    private productID: string;

    getProductID():string { return this.productID; }
    setProductID(productID:string) { this.productID = productID; }

但是每个实体和 150 个实体大约有 30 - 80 个属性，因此代码中的 getter 和 setter 定义有点冗长。

为了解决这个问题，我希望使用一个装饰器 @generateGetterAndSetter，我可以用它来装饰每个属性，从而为我动态生成 getter 和 setter。看起来像:

@generateGetterAndSetter
private productID: string;

为了实现这一点，我定义了装饰器并将其添加到我的模块中:

/** decorate the property to attach a getter and setter */
function generateGetterAndSetter(target: any, key: string) {

  // property value
  var _val = this[key];

  // property getter
 var getMethodName = 'get' + key.charAt(0).toUpperCase() + key.slice(1);
 var setMethodName = 'set' + key.charAt(0).toUpperCase() + key.slice(1);

  /** Build the getter and setter functions dynamically */
  var getter = new Function("return function " + getMethodName + "(){  return _val;}")();
  var setter = new Function("return function " + setMethodName + "(newVal){  _val = newVal;}")();

  target[getMethodName] = getter;
  target[setMethodName] = setter;

  Object.defineProperty(target, key, {
      get: getter,
      set: setter,
      enumerable: true,
      configurable: true
  });
}//<--end generateGetterAndSetterDefinition

从上面的代码中，您可以看到我尝试了 Object.defineProperty 以及手动将函数添加到目标。但在测试时:

var product = new Product();
product.setProductID("123456789");  
product.setProductName("Generic Shoes");
product.setUrlTitle("http://some/brand/get");   

console.log("Product: ", product.getProductName(), product.getProductID(), product.getUrlTitle());

它产生不正确的结果:

Product: http://some/brand/get http://some/brand/get http://some/brand/get

不是预期的

Product: Generic Shoes 123456789 http://some/brand/get

这肯定是因为我覆盖了每个作业的定义。有没有更好的方法来解决这个问题，而不必为每个属性包含 get/set 方法，同时仍然保持 getPropertyName() 和 setPropertyName(value) 的正确函数命名约定？

Answer 1

如果您检查window._val，您将看到运行代码后它将等于http://some/brand/get。因此，所有函数都从同一个变量读取和写入，因为在执行 new Function("..."); 时，var _val 的作用域会丢失。

您应该只在对象的原型(prototype)上定义函数 - target:

function generateGetterAndSetter(target: Object, key: string) {
    var getMethodName = 'get' + key.charAt(0).toUpperCase() + key.slice(1);
    var setMethodName = 'set' + key.charAt(0).toUpperCase() + key.slice(1);

    target[getMethodName] = function() {
        return this[key];
    };
    target[setMethodName] = function(val) {
        this[key] = val;
    };
}