TypeScript mixin中使用父类static getter的类型信息问题如何解决

问题根因 #

TypeScript 对 Mixin 的默认泛型约束只会推导类的实例侧类型，不会自动包含类的静态侧成员（包括 static getter、static 属性等），因此编译器无法识别父类上存在的 static getter，触发类型报错。

修复步骤 #

• 第一步：先声明包含目标静态成员的构造函数接口，用来约束 Mixin 的输入基类类型

// 示例：声明需要用到的静态getter类型，这里假设要访问的static getter为name
interface WithStaticGetter {
  new (...args: any[]): any;
  // 把你需要访问的所有静态成员都声明在这里即可
  readonly name: string;
}

• 第二步：修改 Mixin 的泛型约束，将原来默认的构造函数约束替换为你自定义的带静态成员的接口

// 原来的写法（缺少静态成员约束）
// function testMixin<T extends new (...args: any[]) => {}>(Base: T) {

// 修改后的写法
function testMixin<T extends WithStaticGetter>(Base: T) {
  return class extends Base {
    constructor(...args: any[]) {
      super(...args);
      // 这里访问Base的static getter就不会再触发类型错误
      console.log(Base.name);
    }
  }
}

• 第三步：如果有多个静态成员需要访问，直接在WithStaticGetter接口中追加对应的类型声明即可。

额外说明 #

如果你的静态 getter 是可选的，可以在接口声明时给属性加?修饰符，避免传入没有对应静态成员的基类时报错。

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