Why The Variable Is Undefined In The Method But It Is Not In The Constructor In Typescript

I'm developing an application using 1.4.9 Angularjs with Typescript. I have a controller which have the testManagementService service injected, the testManagementService variable i

Solution 1:

I'm pretty sure the problem is that you are passing the function reference to the framework here:

var dataSourceTransport = <DataSourceTransport>{
      read: this.readRepository
  };

Doing this, you are losing the context (the this). When the library calls your readRepository function, it no longer works on the context you defined the function beforehand. So, the testManagementService does not exist on this when the function is called.

You can fix this, by binding to the correct context like so:

var dataSourceTransport = <DataSourceTransport>{
      read: this.readRepository.bind(this)
  };

or by capturing this using an arrow function when passing the reference

var dataSourceTransport = <DataSourceTransport>{
      read: (e) =>this.readRepository(e)
  };

or by making the callback an arrow function itself, keeping the registration as is. Be aware of the implications, as the function then is no more registered on the prototype.

readRepository = (e) => {
    ...
}

For more info, please check https://basarat.gitbooks.io/typescript/content/docs/arrow-functions.html