Typescript: why doesn't it treat 'this' as Javascript?

Question

I wrote the following code:

export class ClickHandlers {
    static entityNameClickHandler(id) {
       console.log("EntityNameClickHandler");        
       // add the new subTree to the end of historySubTree
       this.history.addToHistory(id);
       this.refreshEntityContentElem(this);
    }
}

in another file:

addEventListenersToEntityInExplorer(elem, id) {
      elem.find('[data-id ^= "expand_"]').click(ClickHandlers.expandButtonHandler);
      elem.find('[data-id ^= "entity"]').click(function() {
         ClickHandlers.entityNameClickHandler.call(this, id)
      }.bind(this));

}

I get an error for the lines: this.history.addToHistory(id); this.refreshEntityContentElem(this);

The error is:

Error:(25, 12) TS2339:Property 'history' does not exist on type 'typeof ClickHandlers'.

What I understand is that Typescript looks at 'this' as the class ClickHanlders. However, I called function 'ClickHandlers.entityNameClickHandler' using 'call', so 'this' is not necessarily the wrapping object.

It's a static method and then doesn't have an instance of anything — Jari Pekkala, Mar 01 '17 at 08:36
OK. so why does it have a problem with the 'this' I give it? — CrazySynthax, Mar 01 '17 at 08:37
Possible duplicate of [How to access the correct \`this\` inside a callback?](http://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — Rafal, Mar 01 '17 at 08:38
Typescript does not bind static methods' `this`. It compiles to normal `ClassName.method = function (args) { ...` — GuiDocs, Mar 01 '17 at 09:00
Why do you use 'this' in a static method? You are right, it is implicitly typed to the enclosing class. The way you call it is invalid too in typescript. — Tamas Hegedus, Mar 01 '17 at 09:00

score 2 · Answer 1 · answered Mar 01 '17 at 08:54

Since you are changing this inside the function then you need to tell that to the compiler.
You can do that since typescript version 2.0 by Specifying the type of this for functions:

type MyType = {
    history: any;
    refreshEntityContentElem: (obj: any) => void;
}

export class ClickHandlers {
    static entityNameClickHandler(this: MyType, id) {
       console.log("EntityNameClickHandler");        
       // add the new subTree to the end of historySubTree
       this.history.addToHistory(id);
       this.refreshEntityContentElem(this);
    }
}

Serginho · Answer 2 · 2017-03-01T08:53:48.020

You have to forget javascript if you want to work with Typescript. Typescript throws errors even the code works properly. It's javascript with lots of things that now you can't do, but you will get a clearer code and with less errors.

Error:(25, 12) TS2339:Property 'history' does not exist on type 'typeof ClickHandlers'.

This error says that if you want to use this.[property], this property should be defined as a class variable or in any of parent classes.

As I can see here: this.refreshEntityContentElem(this);, I can figure out you should read a Object Programming Oriented tutorial.

Typescript: why doesn't it treat 'this' as Javascript?

2 Answers2