Scope of this is lost when passing a member function to setInterval

[leewinder]

TypeScript Version: 1.8.10

When passing a member function to setInterval, the scope of 'this' is lost within the callback, though the structure of the code (given experience of any object orientated language) indicates it shouldn't be.

Example code

export class SetIntervalTest {
  private someNumber: number = 1;

  trigger() {
      setInterval(this.setIntervalCallback, 400);
  }

  private setIntervalCallback() {
      console.log(this.someNumber);
  }
}  

Expected behavior
When console.log(this.someNumber); is called, the scope of this is within the scope of the SetIntervalTest interval instance, printing '1'.

Actual behavior:
The scope of this is pulled from global scope, resulting in this.someNumber being 'undefined'. If that isn't possible, the compiler should indicate the expected behaviour is not what you're going to get.

To fix this i need to change 'setInterval(this.setIntervalCallback, 400);' to 'setInterval(() => this.setIntervalCallback(), 400);' so 'this' is correctly scoped in the callback.

[RyanCavanaugh]

https://github.com/Microsoft/TypeScript/wiki/FAQ#why-does-this-get-orphaned-in-my-instance-methods

[leewinder]

Thanks @RyanCavanaugh, still should be either caught at the compile stage (which is possible if it's expected behaviour) and flagged as a warning, or the generated JS structured should generate the obvious intent.

[RyanCavanaugh]

See "something about this" in https://github.com/Microsoft/TypeScript/wiki/FAQ#common-feature-requests

You can have the "correct" code generated by using an arrow function:

    private setIntervalCallback = () => {
      console.log(this.someNumber);
    };

[kitsonk]

Also, note that this behaviour is consistent with the ES6 runtime behaviour. Methods are not statically bound to the instance.

[mhegazy]

There are two parts to get this working correctelly:

1. change the definition in lib.d.ts to include this: void:

declare function setInterval(handler: (this: void, ...args: any[]) => void, timeout: number): number;

1. make methods have this type by default, this is tracked by This-function parameters must be specified in caller *and* callee, even for methods #10288, to work around this the definition of the method can be private setIntervalCallback(this: this) { ... }. with both these changes in you would see the error as desired.

[mhegazy]

I would say the change to the library should be done either ways.

[gdh1995]

I think here TypeScript should keep the same semantics just as ES6, but not force it bound by default.

[zijianhuang]

@leewinder ,

setInterval(()=>this.setIntervalCallback(), 400);

should be just working fine so that the callback can see this.

[paskozdilar]

I think TypeScript should still at least print a warning (e.g. "Method passed without instance. Did you mean to use the arrow function? () => this.setIntervalCallback()"). Maybe with a specific comment that can turn off this warning in case the behavior is intentional.

ES6 runtime behavior specifies this, but in most cases, a naive programmer (like me) would expect this.setIntervalCallback() to be executed with the current value of this.

It took me a while to catch this error because it happened only in specific cases in my code where setTimeout() was called, so having TypeScript compiler warn about it would have prevented me from writing the bug in the first place.

[AudreyKj]

Is this issue still open? I'm happy to work on this!