将函数上下文绑定到对象函数时出现TypeScript错误，如何解决？

问题原因 #

TypeScript会默认推断foo.bar方法中的this类型为foo的结构类型{ bar(): void }，但你通过call传入的对象带有lorem属性，与推断出的this类型不兼容，因此触发类型检查错误。

解决方案 #

1. 显式指定方法的this类型 #

在bar方法的参数列表最前端添加this参数，明确该方法预期的this对象结构，让TypeScript正确识别调用时传入的上下文：

const foo = {
  bar(this: { lorem: string }): void {
    window.console.log(this.lorem);
  }
};

foo.bar.call({ lorem: 'ipsum' });

这是最规范的解决方案，既满足类型检查要求，又清晰表达了方法对this的依赖。

2. 使用类型断言（仅临时场景使用） #

如果不想修改方法定义，可以通过类型断言强制指定this的类型，但这种方式会跳过部分类型检查，可能隐藏潜在问题：

const foo = {
  bar(): void {
    window.console.log((this as { lorem: string }).lorem);
  }
};

foo.bar.call({ lorem: 'ipsum' });

3. 定义复用性接口 #

如果带有lorem的对象结构会多次使用，可以先定义接口，再用它指定this类型，提升代码可维护性：

interface HasLorem {
  lorem: string;
}

const foo = {
  bar(this: HasLorem): void {
    window.console.log(this.lorem);
  }
};

foo.bar.call({ lorem: 'ipsum' });

内容的提问来源于stack exchange，提问作者user19384667