如何显式标注TypeScript mixin工厂函数的返回类型

解决方案 #

你可以将返回类型标注为原基类构造器与混入实例构造器的交叉类型，有两种常用写法：

写法1：提前声明混入属性接口（可读性更高）

先给通用Constructor类型扩展泛型支持，再单独定义混入新增的属性接口：

// 给Constructor加泛型参数，指代构造出的实例类型
type Constructor<T = {}> = new (...args: any[]) => T;

// 定义Scale mixin新增的属性/方法接口
interface ScalingInstance {
  _scale: number;
  setScale(scale: number): void;
  get scale(): number;
}

function Scale<TBase extends Constructor>(Base: TBase): TBase & Constructor<ScalingInstance> {
  return class Scaling extends Base {
    _scale = 1;

    setScale(scale: number) {
      this._scale = scale;
    }

    get scale(): number {
      return this._scale;
    }
  };
}

写法2：直接内联实例类型（无需额外声明接口）

如果不想单独写接口，也可以直接把实例类型写在返回类型里：

type Constructor<T = {}> = new (...args: any[]) => T;

function Scale<TBase extends Constructor>(Base: TBase): TBase & Constructor<{
  _scale: number;
  setScale(scale: number): void;
  get scale(): number;
}> {
  // 原有实现保持不变
}

类型说明 #

• 返回类型中的TBase保留了传入基类的所有构造器特性、静态属性
• 后面的Constructor<xxx>声明了返回的构造函数，能生成包含所有混入属性的实例
• 交叉类型&把两类特性合并，完全匹配mixin返回的匿名类的实际类型

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