Issue with TypeScript Decorator Not Properly Overriding Get/Set Functions for Instance Properties

Question

Issue with TypeScript Decorator Not Properly Overriding Get/Set Functions for Instance Properties

I'm struggling with creating a TypeScript decorator that modifies the get method for a property within a class. The issue I'm facing is getting it to affect instances of the class.

Below is an example scenario:

function CustomDecorator() {
    return function (target: Object, propertyKey: string) {
        Object.defineProperty(target, propertyKey, {
            get: function () {
                return 42;
            },
        });
    };
}

export class ExampleClass {
    @CustomDecorator()
    exampleProperty = 0;
}

const instance = new ExampleClass();
console.log(instance.exampleProperty);// Expected output is 42, but currently returns 0

If anyone could offer guidance or provide a solution, I would greatly appreciate it.

I've attempted replacing the target constructor with a new one that executes Object.defineProperty, however, this approach failed as well.

typescript decorator

Answer 1

Answer №1

According to the official documentation, a property decorator is limited to observing the declaration of a specific property within a class, without the ability to modify its initial value.

The following JavaScript code demonstrates this concept:

class Foo {
    constructor() {
        this.bar = 0;
    }
}

To work around this limitation, one possible solution involves using a class decorator as shown below:

function Decorator() {
  return function (target: any) {
    return class extends target {
      bar = 42;
    };
  };
}

@Decorator()
class Foo {
  bar = 0;
}

const foo = new Foo();
console.log(foo.bar); // 42

If there is a need to specify the property key, a property decorator can be used to keep track of property keys like so:

const KEYS = Symbol('propertyKey');

function Decorator() {
  return function (Target: any) {
    return function () {
      const target = new Target();
      const keys = target[KEYS] || [];
      for (const key of keys) {
        target[key] = 42;
      }
      return target;
    } as typeof Target;
  };
}

function PropertyDecorator() {
  return function (target: any, propertyKey: string) {
    target[KEYS] = target[KEYS] || [];
    target[KEYS].push(propertyKey);
  };
}

@Decorator()
class Foo {
  @PropertyDecorator()
  bar = 0;

  baz = 0;
}

const foo = new Foo();
console.log(foo.bar); // 42
console.log(foo.baz); // 0

Answer 2

According to the official documentation, a property decorator is limited to observing the declaration of a specific property within a class, without the ability to modify its initial value.

The following JavaScript code demonstrates this concept:

class Foo {
    constructor() {
        this.bar = 0;
    }
}

To work around this limitation, one possible solution involves using a class decorator as shown below:

function Decorator() {
  return function (target: any) {
    return class extends target {
      bar = 42;
    };
  };
}

@Decorator()
class Foo {
  bar = 0;
}

const foo = new Foo();
console.log(foo.bar); // 42

If there is a need to specify the property key, a property decorator can be used to keep track of property keys like so:

const KEYS = Symbol('propertyKey');

function Decorator() {
  return function (Target: any) {
    return function () {
      const target = new Target();
      const keys = target[KEYS] || [];
      for (const key of keys) {
        target[key] = 42;
      }
      return target;
    } as typeof Target;
  };
}

function PropertyDecorator() {
  return function (target: any, propertyKey: string) {
    target[KEYS] = target[KEYS] || [];
    target[KEYS].push(propertyKey);
  };
}

@Decorator()
class Foo {
  @PropertyDecorator()
  bar = 0;

  baz = 0;
}

const foo = new Foo();
console.log(foo.bar); // 42
console.log(foo.baz); // 0

Answer 3

Answer №2

For the proper initialization of bar, it is essential to also define the setter method.

function Decorator() {
  return function (target: Object, propertyKey: string) {
    let value
    Object.defineProperty(target, propertyKey, {
      get: function () {
        return 42
      },

      // add
      set: function (v) {
        value = v
      },

    })
  }
}

Alternatively, bar can be defined as one of the following:

bar: undefined

bar: any

Answer 4

For the proper initialization of bar, it is essential to also define the setter method.

function Decorator() {
  return function (target: Object, propertyKey: string) {
    let value
    Object.defineProperty(target, propertyKey, {
      get: function () {
        return 42
      },

      // add
      set: function (v) {
        value = v
      },

    })
  }
}

Alternatively, bar can be defined as one of the following:

bar: undefined

bar: any

Issue with TypeScript Decorator Not Properly Overriding Get/Set Functions for Instance Properties

Answer №1

Answer №2

Similar questions

Angular Custom Pipe - Grouping by Substrings of Strings

Angular Material's dialog modal swiftly closes without delay

Is the communication between Angular service and component failing when using ngFor?

Exploring the possibilities with Rollbar and TypeScript

crafting connections in 3D using TypeORM (ORM)

Directing users to varying pages based on a particular criteria

Retrieving the <html> tag within an Angular component

A guide on loading modules dynamically using React and Typescript from a server

Tips for implementing dynamic properties in TypeScript modeling

Eliminate the loading screen in Ionic 2

Angular auto suggest feature

A guide on retrieving the values of all child elements within an HTML element using Puppeteer

Step-by-step guide on invoking an asynchronous method in canActivate for Ionic and Angular

Attach [!hidden] to a dropdown menu choice using Angular 2

The swipe motion will be executed two times

Converting a JSON array stored in a local file to a TypeScript array within an Angular 5 project

Modify every audio mixer for Windows

What is the best way to utilize the fresh Sanitizer API in Typescript?

Importing multiple modules in Typescript is a common practice

Managing different data types in a single event emitter using Typescript: how do you approach it?