Description
Suggestion
There is a difference in TS behavior that depends on whether the type of this for method is explicitly declared or inferred: typescript playground link
If inferred:
class Example1 {
private field = 1;
show() {
return this.field;
}
}
let example1 = new Example1();
let show1 = example1.show;
example1.show();
show1(); // Runtime errorIf declared explicitly:
class Example2 {
private field = 1;
show(this: Example2) {
return this.field;
}
}
let example2 = new Example2();
let show2 = example2.show;
example2.show();
show2(); // Compile-time error: The 'this' context of type 'void' is not assignable to method's 'this' of type 'Example2'.I believe it would be more consistent and type-safe if it behaved in Example1 the same way as in Example2: if method is using this then it requires this to be object of given class.
🔍 Search Terms
- this
- context
- constraint
- type
✅ Viability 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, new syntax sugar for JS, etc.)
- This feature would agree with the rest of TypeScript's Design Goals.
This will probably be a breaking change for mobx code that uses decorators to automatically bind methods to objects.
⭐ Suggestion
Make inferred type for methods that use this be methodName(this: ClassName, ...): ReturnType instead of simply methodName(...): ReturnType.
📃 Motivating Example
More errors will be caught at compile-time: if developer tries to pass method as callback it will fail except for cases where this isn't used.
Example:
class SomeState {
// ...
doCoolStuff() {
// ...
this.evenCoolerStuff();
}
}
function SomeComponent(props: { state: SomeState }) {
const { state } = props;
return (
<div onClick={state.doCoolStuff} /> /* will emit error at compile-time */
);
}💻 Use Cases
- It allows to detect errors early when passing methods as callbacks and forgetting about
.bind.