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
– Jari Pekkala, Commented Mar 1, 2017 at 8:36
OK. so why does it have a problem with the 'this' I give it? — CrazySynthax
– CrazySynthax, Commented Mar 1, 2017 at 8:37
Possible duplicate of How to access the correct `this` inside a callback? — Rafal
– Rafal, Commented Mar 1, 2017 at 8:38
Typescript does not bind static methods' this. It compiles to normal ClassName.method = function (args) { ... — GuiDocs
– GuiDocs, Commented Mar 1, 2017 at 9:00

Nitzan Tomer · Accepted Answer · 2017-03-01 08:54:10Z

2

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);
    }
}

answered Mar 1, 2017 at 8:54

Nitzan Tomer

166k51 gold badges330 silver badges307 bronze badges

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

Comments

Serginho · Accepted Answer · 2017-03-01 08:53:48Z

0

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.

edited Mar 1, 2017 at 8:53

answered Mar 1, 2017 at 8:48

Serginho

7,5303 gold badges31 silver badges54 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related