答案

在 TypeScript 中，可以在函数的签名中显式指定 this 的类型。这用于对象和类的方法，以确保调用上下文的正确类型。

指定 this 类型的示例：

interface Person {
  name: string;
  greet(this: Person): void;
}
const person: Person = {
  name: 'Max',
  greet() {
    console.log(`Hello, ${this.name}!`);
  }
};

对于函数，可以显式指定 this 的类型——它是第一个未命名的参数：

function showName(this: { name: string }) {
  console.log(this.name);
}

箭头函数的特点：

• 箭头函数没有自己的 this 上下文。this 的值来自于周围的作用域。
• 因此，无法为箭头函数显式指定 this 的类型——签名将被忽略。

为什么需要这样？ 可以在不正确使用对象的方法时捕捉错误，帮助保持运行时 “绑定” 的准确性（例如，在事件处理程序中）。

陷阱问题

可以在箭头函数中显式指定 this 的类型吗？有什么陷阱？

回答：不可以。箭头函数从外部上下文捕获 this，而 ECMAScript 规范并不允许在内部具有自己的 this 值。

const foo = (this: any) => {} // 编译错误

如果需要控制 this，请使用普通的（function）函数。

因为不了解主题细节而导致的真实错误示例

---

故事

在 web 应用程序中，事件处理程序的方法写成箭头函数并带有 this。期望 TypeScript 捕捉绑定错误，但箭头函数没有自己的 this。结果是：上下文丢失，在操作 DOM 处理程序时出现奇怪的 bug。

故事

在类中，方法通过普通函数声明显式的 this 类型，但将方法作为回调传递时（setTimeout(obj.method, 1000)）this 丢失，出现运行时错误。忘记通过 bind 或箭头函数固定上下文。

故事

在一个数据模型库中忘记为接口的方法指定 this 类型。TypeScript 在错误调用方法时不会显示错误，但在生产环境中，应用程序在访问不存在的属性时崩溃。