如何为TypeScript中用户定义的函数f定义类型，限制this仅含aa属性？

你可以通过TypeScript的函数this参数类型注解来实现需求，既可以用接口也可以用类来定义this的上下文类型，两种方式都能满足f由用户独立定义、不作为A类方法的要求。

方式一：用接口定义this上下文类型 #

先声明一个接口描述this必须包含的属性，再给函数f指定类型：

// 定义this上下文的类型，仅包含aa属性
interface RequiredThisContext {
  aa: number;
}

// 给f指定类型，明确它的this必须符合上述接口
let f: (this: RequiredThisContext) => void = function () {
  this.aa += 1; // TypeScript会校验this的属性，确保只能访问aa
};

class A {
  aa: number;
  // 构造函数接收符合类型要求的f
  constructor(f: (this: RequiredThisContext) => void) {
    this.aa = 1;
    f.call(this); // A的实例拥有aa属性，符合上下文要求，无类型错误
    console.log(this.aa); // 执行后输出2
  }
}

new A(f);

方式二：用类定义this上下文类型 #

如果偏好类的方式，可以创建一个基类来描述上下文结构：

// 基类定义this需要的属性结构
class BaseContext {
  aa: number;
  constructor(aa: number) {
    this.aa = aa;
  }
}

// 指定f的this类型为BaseContext
let f: (this: BaseContext) => void = function () {
  this.aa += 1;
};

class A {
  aa: number;
  constructor(f: (this: BaseContext) => void) {
    this.aa = 1;
    f.call(this); // A的实例结构和BaseContext兼容，类型校验通过
    console.log(this.aa);
  }
}

new A(f);

核心要点 #

• TypeScript的this参数是编译时语法，编译后会被移除，不会影响JavaScript的运行逻辑。
• 两种方式都能严格限制f只能访问this上的aa属性，如果尝试访问其他属性（比如this.bb），TypeScript会直接抛出类型错误。
• 用户只需要按照指定的函数类型编写f即可，完全不需要将f作为A类的方法。

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