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

Puppeteer: implementing wait timeout is crucial to successfully handle Auth0 login process

Cypress: Importing line in commands.ts is triggering errors

React TypeScript: The properties of 'X' are not compatible. 'Y' cannot be assigned to 'Z' type

Different ways to showcase a value from the CSS file on the console using console.log

What happens when a typed Array in Typescript has an undefined property?

The Angular Button fails to display when all input conditions are met

Modifying the name of a key in ng-multiselect-dropdown

How can one properly conduct a health check on a Twilio connection using TypeScript?

Can you guide me on how to record a value in Pulumi?

Navigating with Angular: Transmitting dynamic URL parameters to components

Having difficulty casting the parameter type from Array.find() in TypeScript

Using Typescript types or a linter can help avoid mistakenly rendering the raw function in JSX instead of its executed return value

TypeScript enum type encompassing all potential values

"What is the methodology for specifying generics in a TypeScript FC component?"

What is the process for utilizing a Typescript Unit Test to test Typescript code within Visual Studio?

Basic exam but located in a place that is not valid

Converting JavaScript object data to x-www-form-urlencoded: A step-by-step guide

When converting a PDF to a PNG, the precious data often disappears in the process

Can we limit the return type of arrow function parameters in TypeScript?

When running on localhost, IE11 only shows a white screen while the other browsers function properly