Vfrdtyky

I have the following case, I want to use a decorator to basically change the get of a function, the goal is that the get return if a specific variable has been set or not.

I have the code required to do it but I think I'm not fully understanding how decorators work. I've created the following example on typescript playground: here

function PropertyDecorator(

    target: Object, // The prototype of the class

    propertyKey: string | symbol // The name of the property

) {

    let value = false;



    console.log('hit');



    return {

    get: () => {

        return value;

    },

    set: (val: string) => {

        value = val.toLowerCase() !== 'false';

    },

    enumerable: true,

    configurable: true

    };

}



class PropertyDecoratorExample {



    @PropertyDecorator

    name: string;



    @PropertyDecorator

    name2: string;



    constructor() {

        console.log('New instance');

        console.log(this.name, 'should be false');

        this.name = 'hey';

        console.log(this.name, 'should be true');

        console.log(this.name2, 'should be false');

    }

}



new PropertyDecoratorExample();

new PropertyDecoratorExample();

has you can see from the example, the first instance of the object is correct (check the console)
the second instance though, for some reason is keeping the same context as the first one, any ideas why? or what is wrong here?

The problem is that your decorator is invokes exactly once per class per decorated field. So the arrow functions inside the decorator will capture that value variable and will use it for all instances of the decorated class.

You should not keep instance data in decorator function variables (because as explained above they will be shared) You can keep the data on the current instance which, if you use a regular function, is accessible inside get/set functions using this

function PropertyDecorator(

    target: Object, // The prototype of the class

    propertyKey: string // The name of the property

): any {

    console.log('hit');



    return {

      get: function ()  {

        return !!this[propertyKey + 'value'];

      },

      set: function(val: string) {

        this[propertyKey + 'value'] = val.toLowerCase() !== 'false';

      },

      enumerable: true,

      configurable: true

    };

}



class PropertyDecoratorExample {



    @PropertyDecorator

    name: string;



    @PropertyDecorator

    name2: string;



    constructor() {

        console.log('New instance');

        console.log(this.name, 'should be false');

        this.name = 'hey';

        console.log(this.name, 'should be true');

        console.log(this.name2, 'should be false');

    }

}



new PropertyDecoratorExample();

new PropertyDecoratorExample();