Method decorator compile to ES5 get error

[byeval]

I'm learning TypeScript decorator and write a demo below:

class Hero {
    public name: string;
    public power: string;

    constructor(name: string, power: string) {
        this.name = name
        this.power = power
    }

    @logMethod
    showPower() {
        return `${this.name} has special power: ${this.power}`
    }
}

function logMethod(target:Function, key:string, descriptor: TypedPropertyDescriptor<any>){
  var originalMethod = descriptor.value; 

  //editing the descriptor/value parameter
  descriptor.value =  function (...args: any[]) {
      var a = args.map(a => JSON.stringify(a)).join();
      // note usage of originalMethod here
      var result = originalMethod.apply(this, args);
      var r = JSON.stringify(result);
      console.log(`Call: ${key}(${a}) => ${r}`);
      return result;
  }

  // return edited descriptor as opposed to overwriting 
  // the descriptor by returning a new descriptor
  return descriptor;
}

and compile to ES5 get code below:

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var Hero = (function () {
    function Hero(name, power) {
        this.name = name;
        this.power = power;
    }
    Hero.prototype.showPower = function () {
        return this.name + " has special power: " + this.power;
    };
    __decorate([
        logMethod
    ], Hero.prototype, "showPower");
    return Hero;
})();
function logMethod(target, key, descriptor) {
    var originalMethod = descriptor.value;
    //editing the descriptor/value parameter
    descriptor.value = function () {
        var args = [];
        for (var _i = 0; _i < arguments.length; _i++) {
            args[_i - 0] = arguments[_i];
        }
        var a = args.map(function (a) { return JSON.stringify(a); }).join();
        // note usage of originalMethod here
        var result = originalMethod.apply(this, args);
        var r = JSON.stringify(result);
        console.log("Call: " + key + "(" + a + ") => " + r);
        return result;
    };
    // return edited descriptor as opposed to overwriting 
    // the descriptor by returning a new descriptor
    return descriptor;
}

then i run the compiled code in Chrome Canary, and got an error:

Uncaught TypeError: Cannot read property 'value' of undefined(…)

i think the problem is that the _decorate function doesn't work expectedly, it should compare with undefined instead of null.

var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;

when compare with null, method decorator cannot get the descriptor which should provided by Object.getOwnPropertyDescriptor(target, key)

[Arnavion]

Your decorator signature is wrong. As you can see __decorate is called with three arguments, so c is 3, which means when calling the decorator it corresponds to d(target, key), not d(target, key, r). So logMethod is only called with two parameters.

In playground (and every recent TS version) I see that __decorate is called with four parameters and the fourth parameter is null, which is correct.

__decorate([
    logMethod
], Hero.prototype, "showPower", null);

How did you get the output that has only three parameters to __decorate ?

[byeval]

Thanks for your reply. I found the problem is that the target parameter of logMethod function has wrong type, i change the type to any and then i get the correct __decorate function with four parameters.

[RyanCavanaugh]

Is this solved then?

[Arnavion]

That shouldn't matter though? The emit for __decorate is independent of the decorator's signature.

[byeval]

Sorry, it's seems that this is a typescript command line bug, i paste my code in playground is ok and get the correct __decorate function, but the code compiled by typescript compiler still get __decorate function with three parameters.

tsc Version 1.7.5

[RyanCavanaugh]

Ping @rbuckton

[rbuckton]

Are you supplying a script target? The descriptor is only provided when using --target ES5 or later.

[byeval]

@rbuckton Thank you, solved! I specify target: ES5 in tsconfig.json which doesn't work in command line mode.

[adamgrey28]

If you have the issue, it means compiler runs without --experimentalDecorators or your tsconfig.json is not loaded. Try explicitly note: "tsc tsc --experimentalDecorators yourFIleHere". I think it isn't issue, it protect: null as fourth parameter don't emits without decorator flag.

[bhavin9695]

When i am creating class with function like below it is giving me PropertyDescriptor undefined for method decorator.

function editable(value : boolean):Function{
return function (target : any, propName: string, descriptor: PropertyDescriptor) {
descriptor.writable = value;
};
}

class MethodDecorator{
name = "method decorator";

@editable(true)
printName = function (){
    console.log("This is actual function of Method Decorator");
}

}
let methodDecoratorObj = new MethodDecorator();
methodDecoratorObj.printName();

ERROR :
Uncaught (in promise) Error: Cannot set property 'writable' of undefined
Evaluating http://localhost:3000/script.js
Loading script.js
at eval (script.js:438)
at __decorate (script.js:17)
at eval (script.js:449)
at Object.eval (script.js:453)
at eval (script.js:461)
at eval (script.js:462)
at eval ()
at Re (system.js:4)
at system.js:4
at j (system.js:4)

but when i m declaring my class function like below i m getting expected output.

class MethodDecorator{
name = "method decorator";

@editable(true) 
printName(){
    console.log("This is actual function of MethodDecorator");
}

}
let methodDecoratorObj = new MethodDecorator();
methodDecoratorObj.printName();

OUTPUT :
This is actual function of MethodDecorator

So why is it behaving like this although it is just different type of function declaration.