如何在类本地方法之一中从Javascript回调访问Typescript类成员

Question

i have the folloing code:

export class AuthService {
  token: string;
  refreshToken: string;
  constructor(private router: Router) { }

  signinUser(username: string, password: string) {
      const user = new mylib.User(username, password);
      user.requestSessionToken(true, {
        onOk: function (result) {
          let tokenMap: any;
          tokenMap = result;
          this.token = tokenMap.sessionToken;
          this.refreshToken = tokenMap.refreshToken;
          mylib.Datastore.configureWithSessionToken(this.token);
          this.router.navigate(['/signup']);
        },
        onError: function (error) {
          console.error(error);
        }
      });
      console.log(this.token);
      console.log('signinUser Called!');
  }
}

mylib is Javascript library and this is not pointing to my object so this.token is not woking how can i access my class fields in Javascript block?

Answer 1

Arrow function is the answer.

export class AuthService {
  token: string;
  refreshToken: string;
  constructor(private router: Router) { }

  signinUser(username: string, password: string) {
      const user = new mylib.User(username, password);
      user.requestSessionToken(true, {
        onOk: (result) => {
          let tokenMap: any;
          tokenMap = result;
          this.token = tokenMap.sessionToken;
          this.refreshToken = tokenMap.refreshToken;
          mylib.Datastore.configureWithSessionToken(this.token);
          this.router.navigate(['/signup']);
        },
        onError: (error) => {
          console.error(error);
        }
      });
      console.log(this.token);
      console.log('signinUser Called!');
  }
}

alternatively (old-school), you can use bind() : (function (result) { ... }).bind(this)

The reason is in the onOK callback, this is probably the user instance, not your class.

Always be careful on what is this when you are dealing with callbacks.