是否可以在打字稿中创建动态获取器/设置器？ [英] Is it possible to create dynamic getters/setters in typescript?

问题描述

我是打字稿的新手，我正尝试将我们的应用程序从es2016重写为打字稿。
我的任务是创建一个具有数据属性的类，并使数据对象中的每个元素都可以作为类属性使用。

I'm new in typescript, and i'm trying to rewrite our application from es2016 to typescript. My task is to have a class with data property and make each element from data object available as class property.

我被这个JavaScript代码困住了： / p>

I get stuck on this javascript code:

    for(let key in this.data) {                                                    
      Object.defineProperty(this, key, {                                           
        get: function(value:any) { return this.data[key]; },                       
        set: function(value:any) {                                                 
          if (this.data[key] !== value) {                                          
            this.data[key] = value;                                                
            this.updatedKeys.push(key);                                            
          }                                                                        
        },                                                                         
      });                                                                          
    }

使用getter / setter作为打字稿非常容易，但是我很困惑如果我可以动态创建它们？

It is pretty easy to use getter/setters for typescript, but i get confused if i can create them dynamically?

    interface IData {                                                               
      id: number;                                                                   
      [propName: string]: any;                                                      
    }                                                                               

    class Model  {                                                 

      protected updatedKeys:string[] = [];                                          

      baseUrl:string = null;                                                        
      data:IData;                                                                   
      fields:IData;

      constructor(data:IData={id:null}, fields:IData={id:null}) {                      
        super()                                                                        
        this.data = data;                                                              
        this.fields = fields;                                                                                                     

        for(let key in this.data) {                                                    
          Object.defineProperty(this, key, {                                           
            get: function(value:any) { return this.data[key]; },                       
            set: function(value:any) {                                                 
              if (this.data[key] !== value) {                                          
                this.data[key] = value;                                                
                this.updatedKeys.push(key);                                            
              }                                                                        
            },                                                                         
          });                                                                          
        }                                                                              
      } 
    }

tsc -t ES2016 --lib es2016， dom模型。ts

将给出此错误：

models.ts(33,40): error TS2345: Argument of type '{ get: (value: any) => any; set: (value: any) => void; }' is not assignable to parameter of type 'PropertyDescriptor & ThisType<any>'.
  Type '{ get: (value: any) => any; set: (value: any) => void; }' is not assignable to type 'PropertyDescriptor'.
    Types of property 'get' are incompatible.
      Type '(value: any) => any' is not assignable to type '() => any'.

我不知道如何摆脱这个问题。

And i don't know how to get rid of this problem.

推荐答案

感谢 https://github.com/ epicgirl1998 ，她帮助我找到了解决方案。我将其发布在这里：

thanks to the https://github.com/epicgirl1998, she helped me to find the solution. I'll post it here:

错误是即使未通过getters
，getter仍具有值参数任何值

the error is that the getter has a value parameter even though getters aren't passed any value

我将其替换为get：function（）{return this.data [key]; }，现在
唯一的错误是该类中有一个超级调用，如果该类扩展了另一个类，则只需要

i replaced it with get: function() { return this.data[key]; }, and now the only error is that there's a super call in the class which is only needed if the class extends another class

，访问器内部的内容并不指向类实例，
而是使用箭头功能对其进行修复

also, this inside the accessors doesn't refer to the class instance, but using arrow functions for them should fix it

请尝试以下操作：

interface IData {                                                               
  id: number;                                                                   
  [propName: string]: any;                                                      
}                                                                               

class Model  {                                                 

  protected updatedKeys:string[] = [];                                          

  baseUrl:string = null;                                                        
  data:IData;                                                                   
  fields:IData;

  constructor(data:IData={id:null}, fields:IData={id:null}) {                      

    this.data = data;                                                              
    this.fields = fields;                                                                                                     

    for(let key in this.data) {                                                    
      Object.defineProperty(this, key, {                                           
        get: () => { return this.data[key]; },                       
        set: (value:any) => {                                                 
          if (this.data[key] !== value) {                                          
            this.data[key] = value;                                                
            this.updatedKeys.push(key);                                            
          }                                                                        
        },                                                                         
      });                                                                          
    }                                                                              
  } 
}

这篇关于是否可以在打字稿中创建动态获取器/设置器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！