Compiler option for implicitly adding this context on class member methods

[flash1293]

Search Terms

this context class

Suggestion

A new compiler option --enforceClassMemberThisContext. It causes the compiler to implicitly set the this context of class methods which use this somewhere in the method body and behave as the user had done this manually on each method.

Use Cases

It is pretty common to pass class methods down to other parts of the program as event listeners (e.g. in react apps). In this case it is almost always necessary to bind the this context to the current class instance if the method uses this in some form. A common mistake is to miss this binding for a given method. It is possible to add a typescript check for this mistake (by specifying the this-"parameter" on each class method) but one would have to do this for each method by hand, which is also easy to miss. By specifying it as a compiler flag, it would become very hard to make this mistake.

Examples

The following example doesn't raise a typescript error in current typescript but would do so with the proposed compiler flag:

class MyComponent {
  otherMethod() {}

  clickHandler() {
    // ...
    this.otherMethod();
  }

  registerListeners() {
     //...
     buttonElement.onclick = this.clickHandler;
  }
}

This example produces a "The 'this' types of each signature are incompatible." error in current typescript and is identical to the example above with the proposed compiler flag:

class MyComponent {
  otherMethod() {}

  clickHandler(this: MyComponent) {
    // ...
    this.otherMethod();
  }

  registerListeners() {
     //...
     buttonElement.onclick = this.clickHandler;
  }
}

Problems/Discussion Points

• This doesn't work with element.addEventListener at the moment because the EventListener interface doesn't specify or complain about wrong this contexts (but I think it should, maybe this is another separate issue?)
• This doesn't work with the semi-common pattern of overwriting the method instances with its bound versions in the constructor. Maybe the docs should recommend something like this instead (should be roughly equivalent besides the different name for the bound handler If I'm not mistaken)?

class MyComponent {
  // ...
  clickHandler() { /* ... */ }
  boundClickHandler = this.clickHandler.bind(this);
  // ...
}

• Maybe this could be implemented as a tslint check, but it would require the user to type out the this context for each method separately, which is cumbersome.

Checklist

My suggestion meets these guidelines:

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, etc.)
• This feature would agree with the rest of TypeScript's Design Goals.

[DanielRosenwasser]

Is this a duplicate of #7968 (also discussed at #6739)?

[flash1293]

@DanielRosenwasser whoops, you are right - can be closed as duplicate.