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

Integrate a fresh global JSX attribute into your React project without the need for @types in node_modules

The TypeScript error message states that a value of 'undefined' cannot be assigned to a type that expects either a boolean, Connection

Tips for correctly passing the appropriate data type using generics in TypeScript

Tips for resolving the issue of dropdown menus not closing when clicking outside of them

Take action once the Promise outside of the then block has been successfully completed

The comparison between importing TypeScript and ES2015 modules

Discover the data type of the subfield within an interface or type in Typescript

How can one change the data type specified in an interface in TypeScript?

Translate array into object with correct data types (type-specific method)

The element is implicitly assigned an 'any' type due to the fact that an expression of type 'any' cannot be used to index types in nodejs and solidity

Is it possible to utilize Webpack 5's ChunkGroup API with several entries?

What is the method for defining a function within a TypeScript namespace?

Using the decorator in VueJS Typescript allows you to easily define dynamic computed properties

Creating valuable properties in TypeScript is a skill that requires knowledge and practice

Angular Material (8) error code S2591: The variable 'require' is not defined in the current scope

In Javascript, check if an item exists by comparing it to null

Offering a limited selection of generic type options in TypeScript

How can we declare and showcase a generic object with an unspecified number and names of keys in React using TypeScript?

The issue of excessive recursion in Typescript

Can we guarantee the uniqueness of a function parameter value during compilation?