TypeScript中如何为接口Config内的函数指定this类型为Foo？

TypeScript 完全支持你提到的这个场景，有两种常用实现方式：

方法1：使用内置 ThisType 工具类型（推荐） #

这是批量指定Config内所有函数this类型的最简方案，不需要逐个修改函数属性声明：

interface Foo {
  someKey: number;
  onOpen: () => void;
  // 其他Foo属性
}

// 给Config交叉上ThisType<Foo>，即可声明Config内所有函数的默认this上下文为Foo
interface Config extends ThisType<Foo> {
  id: string;
  onOpen?: () => void;
  // 后续新增的任意函数属性都会自动继承this为Foo类型
  onClose?: () => void;
  onError?: (code: number) => void;
}

declare function mainFunction(config: Config): Foo;

注意：ThisType 的类型推导需要项目tsconfig中开启 noImplicitThis 配置，大部分TS项目的严格模式默认已经开启该配置。

配置完成后，你给出的调用示例会获得正确的类型提示，this.someKey 会被正确识别为Foo上的number类型属性，不会报类型错误。

方法2：手动给单个函数声明this参数 #

如果你不需要批量指定，或者需要给不同函数设置不同的this类型，可以给每个函数属性显式声明虚拟this参数：

interface Foo {
  someKey: number;
  onOpen: () => void;
}

interface Config {
  id: string;
  // 函数的第一个参数声明为this: Foo，该参数仅用于类型检查，不会影响实际运行时的参数数量
  onOpen?: (this: Foo) => void;
  onClose?: (this: Foo) => void;
}

declare function mainFunction(config: Config): Foo;

该方案和ThisType效果完全一致，调用时传入的函数内的this会被正确推导为Foo类型。

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