Ist es möglich, dynamische Getter/Setter in Typoskript zu erstellen?

Question

Ich bin neu in Typoskript, und ich versuche, unsere Anwendung von es2016 in Typoskript umzuschreiben. Meine Aufgabe besteht darin, eine Klasse mit Dateneigenschaft zu haben und jedes Element aus dem Datenobjekt als Klasseneigenschaft verfügbar zu machen.

ich auf diesem JavaScript-Code fest: `` `

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

` ``

Es ist ziemlich einfach Getter/Setter für Typoskript zu verwenden, aber ich verwirrt, wenn ich schaffen kann sie dynamisch?

`` `

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" models.ts

diesen Fehler geben:

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'.

Und ich weiß nicht, wie loswerden von diesem Problem.

Vielen Dank für Hilfe im Voraus.

Answer 1

dank der https://github.com/epicgirl1998 half sie mir, die Lösung zu finden.Ich werde es hier posten:

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

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

try this:

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

Answer 2

In Typoskripten müssen Sie Objekte in der Regel nicht dynamisch mit Methoden und Eigenschaften erstellen. Sie erstellen entweder Instanzen von Klassen oder Sie geben Ihre Daten über eine Schnittstelle ein.

Wenn Sie nur geladene (json) Daten in typisierte Daten konvertieren möchten, können Sie eine Schnittstelle verwenden, die die Struktur Ihrer json Daten beschreibt.

Schnittstelle beschreibt die Eigenschaften von Actor Daten

interface Actor { 
    name: string; 
    height: number; 
} 

fetch generic json Daten von irgendwo

let data : any = getSingleActorData(); 

Typ der Schauspieler auf eine Schnittstelle und sie in einem Schauspieler Array

let actorData : Actor[] = []; 
actorData.push(data as Actor); 

Jetzt ist Ihre IDE ermöglicht es Ihnen, den Namen und die Höhe der Schauspieler Variable zuzugreifen:

console.log(actorData[0].name); 

Wenn Sie ein komplettes ‚Objekt‘ mit Getter und Setter wollen können Sie eine Schauspieler-Klasse erstellen und dann instanziiert

class Actor { 
    private _name:string; 
    private _height:string; 
    get name {} 
    set name {} 
    get height {} 
    set height {} 
    constructor(name:string, height:number){ 
    } 
} 

Und dann können Sie Ihre Daten in json Schauspielern Beispiel setzen: mit den Daten, die Sie geladen

actorData.push(new Actor(jsondata.name, jsondata.height));