TS2684
error TS2684: The ‘this‘ context of type ‘void‘ is not assignable to method’s ‘this‘ of type ‘Person‘.
Broken Code ❌
1
2
3
4
5
6
7
8
9
| type Person = {
name: string;
};
export function sayHello(this: Person, text: string = 'Hello'): void {
console.log(`${text} ${this.name}`);
}
sayHello('Welcome');
|
Fixed Code ✔️
When calling a function that defines a this parameter, then we have to set the this context with apply, bind or call.
Using apply:
1
2
3
4
5
6
7
8
9
10
11
12
13
| type Person = {
name: string;
};
export function sayHello(this: Person, text: string = 'Hello'): void {
console.log(`${text} ${this.name}`);
}
const benny: Person = {
name: 'Benny',
};
sayHello.apply(benny, ['Welcome']);
|
Using bind:
1
2
3
4
5
6
7
8
9
10
11
12
13
| type Person = {
name: string;
};
export function sayHello(this: Person, text: string = 'Hello'): void {
console.log(`${text} ${this.name}`);
}
const benny: Person = {
name: 'Benny',
};
sayHello.bind(benny)('Welcome');
|
Using call:
1
2
3
4
5
6
7
8
9
10
11
12
13
| type Person = {
name: string;
};
export function sayHello(this: Person, text: string = 'Hello'): void {
console.log(`${text} ${this.name}`);
}
const benny: Person = {
name: 'Benny',
};
sayHello.call(benny, 'Welcome');
|