Directive not working when registered with a TypeScript class variable

[reppners]

Inspired by some ng-conf videos I've written a directive with a TypeScript class.

When I set the directive name that I want to use to register the directive in a class variable the directive ceases to work.

When using this convention for modules and controllers it is working.

Here is a demo

[gkalpak]

This happens because (in ES6) functions (which is what TestController and ClassDirective are turned into) have a (non-writable) name property, which holds the...name of the function (MDN). This property "shadows" the static name property defined by you.

Thus, TestController.name equals TestController and ClassDirective.name equals ClassDirective (and you can't change that by defining a static name property). So you are registering your directive as directive('ClassDirective', ...), which won't work.
(Obviously, TestController works because your static name property and happens to be the same as TestController.name.)

You could use a differently named property (e.g. _name).

[reppners]

Oh.. well.. maybe this is something the typescript compiler should tell me. (at least warn)

So basically if I would name the directive class in a camel case fashion like camelCase it would also work without me defining the property name at all, wouldn't it?

Thanks for the hint. I wasn't even aware that there are properties in ES6 which are shadowing own declarations. Thinking along the lines of "normal javascript" I would have thought I would overwrite the property if it existed.

EDIT: But wait a second - I'm running this code in the latest chrome, transpiling to ES5 - is there already running ES6 in my browser without me knowing (when not using a ES6 class declaration but a function)?

EDIT2: Nevermind - it is meant for functions not classes so I guess: Yes, Chrome will run this code with ES6 when it is capable of doing so.

[gkalpak]

@reppners: I don't think there is something special about the name property and "shadowing" isn't a very technical term. The point is, name is a "plain" non-writable property. I find it kind of weird that trying to assign a value to an non-writable property is silently ignored, but this is what happens (and I don't think it has anythng to do with ES6).

E.g.:

var obj = {};
Object.defineProperty(obj, 'test', {value: 'foo', writable: false});
obj.test;   // returns: 'foo'
obj.test = 'bar';   // returns: 'bar'
obj.test;   // return: 'foo'