如何让TypeScript中的Mixin类同时作为类型和值使用？

问题描述 #

我按照TypeScript的Mixin示例，通过const EightBitSprite = Scale(Sprite)生成混合类，却发现EightBitSprite仅为值而非类型：使用new Map<string, EightBitSprite>会触发TS2749错误，提示需改用typeof EightBitSprite。

这带来两个问题：

• 编码时需区分普通类和混合类的类型用法
• 若将普通类改为混合类，需批量修改所有类型引用

我目前的临时方案是定义继承混合类的新类，如class RealEightBitSprite extends EightBitSprite {}，但这会导致类层级冗余，且易混淆功能相同的两个类。请问是否有方法让EightBitSprite同时作为类型和值使用？

解决方法 #

方法1：手动定义同名类型别名（快速解决） #

利用TypeScript支持同名类型和值的特性，用InstanceType提取混合类的实例类型，定义和变量同名的类型别名：

// 假设已有Sprite类和Scale混合函数
const EightBitSprite = Scale(Sprite);
// 提取实例类型，定义同名类型
type EightBitSprite = InstanceType<typeof EightBitSprite>;

// 现在可以正常使用：作为值是构造函数，作为类型是实例类型
const sprite = new EightBitSprite();
const spriteMap = new Map<string, EightBitSprite>(); // 无TS2749错误

方法2：优化混合函数的类型定义（一劳永逸） #

调整混合函数的类型声明，让TypeScript自动推断出返回类的实例类型，无需手动定义类型别名。核心是用泛型约束构造函数，并明确返回类的实例类型：

// 定义通用构造函数类型
type Constructor<T = {}> = new (...args: any[]) => T;

// 优化Scale混合函数的类型
function Scale<TBase extends Constructor>(Base: TBase) {
  return class Scaled extends Base {
    // 混合类的逻辑
    scale: number = 1;
    setScale(newScale: number) {
      this.scale = newScale;
    }
  };
}

// 生成混合类，TypeScript会自动推断实例类型
const EightBitSprite = Scale(Sprite);

// 直接使用即可，无需额外操作
const spriteMap = new Map<string, EightBitSprite>(); // 正常通过类型检查
const sprite = new EightBitSprite();
sprite.setScale(0.5); // 类型提示正常

原理说明 #

普通类在TypeScript中同时扮演两个角色：

• 值：类的构造函数
• 类型：类的实例类型

但通过函数返回的混合类，TypeScript默认只会将变量识别为构造函数（值），不会自动将其作为实例类型。上述两种方法本质都是让TypeScript将变量名同时关联到实例类型和构造函数值。

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