Method decorators

Method decorators are decorators that can be applied to a method on a class. Method decorators are invoked by the JavaScript runtime with three parameters. Remember that class decorators have only a single parameter (the class prototype) and property decorators have two parameters (the class prototype and the property name). Method decorators have three parameters. The class prototype, the method name, and (optionally) a method descriptor. The third parameter, the method descriptor is only populated if compiling for ES5 and above.

Let's take a look at a method decorator, as follows:

function methodDec (
    target: any,  
    methodName: string,  
    descriptor?: PropertyDescriptor) 
{ 
    console.log(`target: ${target}`); 
    console.log(`methodName : ${methodName}`); 
    console.log(`target[methodName] : ${target[methodName]}`); 
} 

Here, we have defined a method decorator named methodDec that accepts our three parameters, target, methodName, and descriptor. Note that the descriptor property has been marked as optional. The first two lines inside the decorator simply log the values of target and methodName to the console. Note, however, the last line of this decorator. Here, we are logging the value of target[methodName] to the console. This will log the actual function definition to the console.

Now we can use this method decorator on a class, as follows:

class ClassWithMethodDec { 
    @methodDec 
    print(output: string) { 
        console.log(`ClassWithMethodDec.print`  
            + `(${output}) called.`); 
    } 
}

Here, we have defined a class named ClassWithMethodDec. This class has a single print function that accepts a single parameter named output of type string. Our print function is just logging a message to the console, including the value of the output argument. The print function has been decorated with the methodDec decorator. The output of this code is as follows:

target: [object Object]
methodName : print
target[methodName] : function (output) {
        console.log("ClassWithMethodDec.print(" + output + ") called.");
    }

As we can see by this output, the value of the target argument is the class prototype. The value of the methodName argument is, in fact, print. The output of the target[methodName] call is the actual definition of the print function.