Repository: TypeScript
Issue: Compiler option for implicitly adding this context on class member methods
Labels: Suggestion,In Discussion,Add a Flag

## 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:
```ts
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:
```ts
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)?
```ts
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:

* [x] This wouldn't be a breaking change in existing TypeScript/JavaScript code
* [x] This wouldn't change the runtime behavior of existing JavaScript code
* [x] This could be implemented without emitting different JS based on the types of the expressions
* [x] This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, etc.)
* [x] This feature would agree with the rest of [TypeScript's Design Goals](https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals).