Can dynamic getters and setters be implemented in TypeScript?

Question

Can dynamic getters and setters be implemented in TypeScript?

I've recently ventured into typescript and am currently working on converting our application from es2016 to TypeScript. My current task involves creating a class with data properties and ensuring each element from the data object is accessible as a class property.

However, I'm facing a challenge with this JavaScript code snippet:

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

Implementing getter/setters in TypeScript is straightforward, but my confusion stems from whether I can generate 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" models.ts

This command returns an error:

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

I'm currently unsure how to resolve this issue.

class typescript dynamic typescript2.0

Answer 1

Answer №1

Big thanks to https://github.com/epicgirl1998 for helping me discover the solution. Here's the fix that was provided:

The issue lies in the getter method having a value parameter, even though getters do not receive any values.

I replaced it with get: function() { return this.data[key]; }, which resolved the error. Additionally, there is an unnecessary super call in the class unless it extends another class.

It's important to note that 'this' inside the accessors does not refer to the class instance. Using arrow functions should resolve this issue.

Please give this a try:

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

Big thanks to https://github.com/epicgirl1998 for helping me discover the solution. Here's the fix that was provided:

The issue lies in the getter method having a value parameter, even though getters do not receive any values.

I replaced it with get: function() { return this.data[key]; }, which resolved the error. Additionally, there is an unnecessary super call in the class unless it extends another class.

It's important to note that 'this' inside the accessors does not refer to the class instance. Using arrow functions should resolve this issue.

Please give this a try:

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 3

Answer №2

When working with TypeScript, it is common to not create objects dynamically with methods and properties. Instead, you can either instantiate classes or define the data structure using an interface.

If your goal is simply to convert loaded JSON data into typed data, you can utilize an interface to specify the schema of your JSON object.

An example interface outlining actor properties

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

Fetching generic JSON data

let data : any = getSingleActorData();

Typing the actor to an interface and storing it in an array

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

Your IDE will now provide auto-completion for accessing the name and height of the actor variable:

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

If you do require a complete 'object' with getters and setters, you can define an Actor class and then instantiate it with the loaded data:

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

You can then assign your JSON data to an instance of the actor class:

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

Answer 4

When working with TypeScript, it is common to not create objects dynamically with methods and properties. Instead, you can either instantiate classes or define the data structure using an interface.

If your goal is simply to convert loaded JSON data into typed data, you can utilize an interface to specify the schema of your JSON object.

An example interface outlining actor properties

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

Fetching generic JSON data

let data : any = getSingleActorData();

Typing the actor to an interface and storing it in an array

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

Your IDE will now provide auto-completion for accessing the name and height of the actor variable:

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

If you do require a complete 'object' with getters and setters, you can define an Actor class and then instantiate it with the loaded data:

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

You can then assign your JSON data to an instance of the actor class:

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

Can dynamic getters and setters be implemented in TypeScript?

Answer №1

Answer №2

Similar questions

"Implementing self-referencing mongoose models in Typescript: A step-by-step guide

I obtained the binary tree output in the form of an object. How can I extract the values from this object and store them in an array to continue working on

Cannot access Injectable service in Angular2

Download pictures from swift into typescript with the help of share extensions

The situation I find myself in frequently is that the Angular component Input

Ignore one specific file when importing all files in Angular 7

Obtaining the initial value from an Observable in Angular 8+

Create a debounced and chunked asynchronous queue system that utilizes streams

Tips for defining a distinct series of key-value pairs in typescript

"Scanner in Java: Capturing Input from an Object

Error encountered when trying to update tree structure in TypeScript with new data due to incorrect array length validation

How to implement a toggle button in an Angular 2 application with TypeScript

There is a chance that the object could be 'undefined' when attempting to add data to it

The issue persists wherein getBoundingClientRect fails to provide the accurate value following a resize

What is the process for using infer to determine the return type of a void function?

Performing simultaneous document queries within a single API in MongoDB

Error in TypeScript: The type 'Ticket[] | undefined' is not recognized as an array type

Creating an interface and setting a default value

Testing Angular 16 Component with Jasmine Spy and callFake Strategy

Using the useRef validation can lead to errors when trying to reference the current value against an input