How to set classes's property in callback in TypeScript?

Question

Here is what I am trying to do:

class User {

    name: string;

    userService: UserService; //service which fetches data from server

    successCallback(response: any) {
          this.name = string; 
    }

    setUser() {     
       var xhr: JQueryXHR = this.userService.fetchUser(); //Returns JQueryXHR object
       xhr.then(this.successCallback);
    }
}

Now, when I call setUser method on an instance of the User class:

var user: User = new User();
user.setUser();

this.name in successCallback evaluates to undefined

How can I get hold of the attribute of the class in callback function?

Possible duplicate of [How to access the correct \`this\` / context inside a callback?](http://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-context-inside-a-callback) — Jonathan Lonowski, May 25 '16 at 16:08
@JonathanLonowski The linked question refers to JavaScript but here I am asking specifically about TypeScript. — Anmol Gupta, May 25 '16 at 16:10
The options mentioned still apply. `.bind()` and bound arrow functions behave the same in both. — Jonathan Lonowski, May 25 '16 at 16:12
@JonathanLonowski Thanks! .bind() worked. I am on EcmaScript 5. — Anmol Gupta, May 25 '16 at 16:19

martin · Accepted Answer · 2016-05-25T16:24:32.250

1

This is because the method is evaluated in windows context.

Wrap the xhr.then call:

xhr.then(response => {
    this.successCallback(response);
});

The => will make sure that this refers to the instance of this class.

edited May 25 '16 at 16:24

answered May 25 '16 at 16:06

martin

93,354
25
191
226

I am on EcmaScript 5. This didn't work but xhr.then(successCallback.bind(this)); worked. => works in 6? – Anmol Gupta May 25 '16 at 16:20
If you're compiling from TypeScript it should take care of everything for you. – martin May 25 '16 at 16:24
I updated my answer, I didn't see `successCallback` has a parameter. – martin May 25 '16 at 16:25

How to set classes's property in callback in TypeScript?

1 Answers1