Strange behavior when working with Typescript decorators and Object.defineProperty

Question

Strange behavior when working with Typescript decorators and Object.defineProperty

I'm currently working on a project that involves creating a decorator to override a property and define a hidden property. Let's take a look at the following example:

function customDecorator() {
    return (target: any, key: string) => {

        let hiddenKey = '_' + key;

        // Define a hidden property
        Object.defineProperty(target, hiddenKey, {
            value: 0,
            enumerable: false,
            configurable: true,
            writable: true
        });

        // Override property get/set
        return Object.defineProperty(target, key, {
            enumerable: true,
            configurable: true,
            get: () => target[hiddenKey],
            set: (val) => {
                target[hiddenKey] = target[hiddenKey] + 1;
            }
        });
    };
}

class ExampleClass {
    @customDecorator()
    propA = null;
    propB = null;
}

let instance = new ExampleClass();

console.log(Object.keys(instance), instance.propA, instance._propA, instance);

The current output is:

[ 'propB' ] 1 1 A { propB: null }

However, the expected output is:

[ 'propA', 'propB' ] 1 1 A { propA: 1, propB: null }

despite propA being enumerable.

If we replace the get and set with:

get: function () {
    return this[hiddenKey]
},
set: function (val) {
    this[hiddenKey] = this[hiddenKey] + 1;
}

We now get:

[ '_propA', 'propB' ] 1 1 A { _propA: 1, propB: null }

even though _propA has its enumerable set to false.

It seems like there are some unexpected behaviors happening here. I would appreciate an explanation of what is going on and how to achieve the desired outcome in this scenario.

typescript properties decorator defineproperty

Answer 1

Answer №1

After significant troubleshooting, I was able to discover a workaround for the issue at hand. It appears that Object.defineProperty does not function correctly during decoration time. However, if applied during runtime, the desired behavior is achieved. So, how can you define a property within a decorator but execute it at runtime?

The key lies in overriding the property within the decorator at decoration time (although only the enumerable aspect seems to be affected). By defining the property with an initialization function instead of using getter and setter, the desired functionality is preserved. This function will execute when the property is first accessed (get) or assigned (set). At this point, the keyword this refers to the runtime instance of the object, allowing for proper initialization as intended during decoration time.

Here is the resolved solution:

function f() {
    return (target: any, key: string) => {
        let pKey = `_${key}`;

        let init = function (isGet: boolean) {
            return function (newVal?) {
                /*
                 * This is called at runtime, so "this" is the instance.
                 */

                // Define hidden property
                Object.defineProperty(this, pKey, {value: 0, enumerable: false, configurable: true, writable: true});
                // Define public property
                Object.defineProperty(this, key, {
                    get: () => {
                        return this[pKey];
                    },
                    set: (val) => {
                        this[pKey] = this[pKey] + 1;
                    },
                    enumerable: true,
                    configurable: true
                });

                // Perform original action
                if (isGet) {
                    return this[key]; // get
                } else {
                    this[key] = newVal; // set
                }
            };
        };

        // Override property to let init occur on first get/set
        return Object.defineProperty(target, key, {
            get: init(true),
            set: init(false),
            enumerable: true,
            configurable: true
        });
    };
}

This implementation results in:

[ 'propA', 'propB' ] 1 1 A { propA: [Getter/Setter], propB: null }

The provided solution accommodates default values, ensuring they are assigned after the correct initialization of get/set operations.

Additionally, it appropriately supports enumerable: setting enumerable to true for property pKey yields the following output:

[ '_propA', 'propA', 'propB' ] 1 1 A { _propA: 1, propA: [Getter/Setter], propB: null }

Although not aesthetically pleasing, this solution effectively functions without compromising performance.

Answer 2

After significant troubleshooting, I was able to discover a workaround for the issue at hand. It appears that Object.defineProperty does not function correctly during decoration time. However, if applied during runtime, the desired behavior is achieved. So, how can you define a property within a decorator but execute it at runtime?

The key lies in overriding the property within the decorator at decoration time (although only the enumerable aspect seems to be affected). By defining the property with an initialization function instead of using getter and setter, the desired functionality is preserved. This function will execute when the property is first accessed (get) or assigned (set). At this point, the keyword this refers to the runtime instance of the object, allowing for proper initialization as intended during decoration time.

Here is the resolved solution:

function f() {
    return (target: any, key: string) => {
        let pKey = `_${key}`;

        let init = function (isGet: boolean) {
            return function (newVal?) {
                /*
                 * This is called at runtime, so "this" is the instance.
                 */

                // Define hidden property
                Object.defineProperty(this, pKey, {value: 0, enumerable: false, configurable: true, writable: true});
                // Define public property
                Object.defineProperty(this, key, {
                    get: () => {
                        return this[pKey];
                    },
                    set: (val) => {
                        this[pKey] = this[pKey] + 1;
                    },
                    enumerable: true,
                    configurable: true
                });

                // Perform original action
                if (isGet) {
                    return this[key]; // get
                } else {
                    this[key] = newVal; // set
                }
            };
        };

        // Override property to let init occur on first get/set
        return Object.defineProperty(target, key, {
            get: init(true),
            set: init(false),
            enumerable: true,
            configurable: true
        });
    };
}

This implementation results in:

[ 'propA', 'propB' ] 1 1 A { propA: [Getter/Setter], propB: null }

The provided solution accommodates default values, ensuring they are assigned after the correct initialization of get/set operations.

Additionally, it appropriately supports enumerable: setting enumerable to true for property pKey yields the following output:

[ '_propA', 'propA', 'propB' ] 1 1 A { _propA: 1, propA: [Getter/Setter], propB: null }

Although not aesthetically pleasing, this solution effectively functions without compromising performance.

Answer 3

Answer №2

Upon reviewing your code, it came to my attention that the property was being defined twice. I have made some modifications to your code for optimization.

class A {
    @dec
    public value: number = 5
}

function dec(target, key) {
    function f(isGet: boolean) {
        return function (newValue?: number) {
            if (!Object.getOwnPropertyDescriptor(this, key)) {
                let value: number;
                const getter = function () {
                    return value
                }

                const setter = function (val) {
                    value = 2 * val
                }
                Object.defineProperty(this, key, {
                    get: getter,
                    set: setter,
                    enumerable: true,
                    configurable: true
                })
            }
            if (isGet) {
                return this[key]
            } else {
                this[key] = newValue
            }
        }
    }

    Object.defineProperty(target, key, {
        get: f(true),
        set: f(false),
        enumerable: false,
        configurable: false
    })
}

const a = new A()
console.log(Object.keys(a))

You can observe the following output in the console:

["value"]

Answer 4

Upon reviewing your code, it came to my attention that the property was being defined twice. I have made some modifications to your code for optimization.

class A {
    @dec
    public value: number = 5
}

function dec(target, key) {
    function f(isGet: boolean) {
        return function (newValue?: number) {
            if (!Object.getOwnPropertyDescriptor(this, key)) {
                let value: number;
                const getter = function () {
                    return value
                }

                const setter = function (val) {
                    value = 2 * val
                }
                Object.defineProperty(this, key, {
                    get: getter,
                    set: setter,
                    enumerable: true,
                    configurable: true
                })
            }
            if (isGet) {
                return this[key]
            } else {
                this[key] = newValue
            }
        }
    }

    Object.defineProperty(target, key, {
        get: f(true),
        set: f(false),
        enumerable: false,
        configurable: false
    })
}

const a = new A()
console.log(Object.keys(a))

You can observe the following output in the console:

["value"]

Strange behavior when working with Typescript decorators and Object.defineProperty

Answer №1

Answer №2

Similar questions

Unlock the Power of Typography in React with Material UI Styled Components

Are the missing attributes the type of properties that are absent?

Issue: Formcontrolname attribute is undefined causing TypeError when trying to retrieve 'get' property.Remember to define formcontrolname attribute to

Unable to create resource in nestjs due to typeScript compatibility issue

Tips for accessing the app instance within a module in Nest.js

Creating an Http interceptor in Ionic 3 and Angular 4 to display a loading indicator for every API request

Handling errors in nested asynchronous functions in an express.js environment

Using the concat operator along with the if statement in Angular to make sequential requests based on certain conditions

Is it possible that React.createElement does not accept objects as valid react children?

Styling Form validation with Ant Design

Issue Establishing Connection Between Skill and Virtual Assistant Via Botskills Connect

What is the best way to extract a nested array of objects and merge them into the main array?

Leverage the power of InfiniteSWR in your project by integrating it seamlessly with

Automate the process of replacing imports in Jest automatically

Error TS2339 occurs when attempting to migrate to TypeScript due to the absence of the 'PropTypes' property on the 'React' type

Exploring the functionality of generic components in React Native when using TypeScript

Having trouble injecting $resource into my Jasmine unit test

Trouble with querying NG elements using "queryAll(By.css)" in Angular and Jasmin unit testing

Ionic Vue is throwing an error indicating that a property is not found on the type '{ $route(currentRoute: any): void; }'

Automatically dismiss modal upon submission