Typescript Method Decorator

Question

I have this code

function changeFunc() {
    return function(target: any, title: string, descriptor: PropertyDescriptor) {

        descriptor.value = function () {
            console.log(this.name);
        };

        return descriptor;

    }
}


class Man {
    name: string = "asdsds";

    constructor(name: string) {
        this.name = name;
    }

    @changeFunc()
    getName() {
        console.log("Hello");
    }

}


var man = new Man('Manos Serifios');
man.getName();

In other words i try (with the decorator) to change the method

getName() {  
    console.log("Hello");  
}

with this

function () {
    console.log(this.name);
}

but this.name evaluated as undefined.

If i console log the "this" it seems that is the right(instance man).

maybe descriptor.value = function () { console.log(target.name); };. I am just guessing and have no experience with typescript decorators — 2pha
– 2pha, Commented Jan 12, 2018 at 0:30

Community · Accepted Answer · 2020-06-20 09:12:55Z

7

You don't have the context of a specific object instance inside the decorator method. The parameters are the following (from https://www.typescriptlang.org/docs/handbook/decorators.html):

Either the constructor function of the class for a static member, or the prototype of the class for an instance member.

The name of the member.

The Property Descriptor for the member.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 12, 2018 at 9:17

Lajos Gallay

1,3178 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

hackerman · Accepted Answer · 2021-03-02 16:17:45Z

3

You can do a little Hack. Replace your code

descriptor.value = function () {
  console.log(this.name);
};

with this nice trick:

descriptor.value = function () {
  // Hack 
  const self = this as Man;
  console.log(self.name);
};

answered Mar 2, 2021 at 16:17

hackerman

311 bronze badge

1 Comment

Steven Edison Over a year ago

but if your decorator is used on hundreds of classes? and you would have to have your class defined in your decorator file and they are codependent.

Ace · Accepted Answer · 2021-07-05 20:46:01Z

0

@hackerman's answer worked for me, as it seems to just be a typing issue. An alternative solution would be to actively define the type of this for that function:

descriptor.value = function (this: Man) {
  console.log(this.name);
};

answered Jul 5, 2021 at 20:46

Ace

1,1462 gold badges11 silver badges27 bronze badges

Collectives™ on Stack Overflow

Typescript Method Decorator

3 Answers 3

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Linked

Related