Typescript泛型类约束Positionable传入Test类报ts2344错误求解

错误产生原因 #

• Positionable本质是构造函数类型，约束的是可被new关键字实例化的类本身，而非类的实例类型
• 代码存在两处不符合约束的问题：
  1. 给Jumpable传入的泛型参数Test是类的实例类型，不满足Positionable的构造函数类型约束
  2. 调用Jumpable时传入的参数是new Test()，也就是Test类的实例对象，不是Test类本身

修复方案 #

你要实现的是TS类混入功能，直接将Test类作为参数传给Jumpable即可，不需要手动实例化，TS也可以自动推导泛型参数，不需要手动指定。修复后代码如下：

type GConstructor<T> = new (...args: any[]) => T;

type Positionable = GConstructor<{ setPos: (x: number, y: number) => void }>;

function Jumpable<TBase extends Positionable>(Base: TBase) {
  return class Jumpable extends Base {
    jump() {
      this.setPos(0, 20);
    }
  };
}

class Test {
  constructor() {
    console.log();
  }

  setPos(x: number, y: number) {
    console.log();
  }
}

// 修复后的调用方式：传入Test类本身，而非实例
const JumpableTest = Jumpable(Test);
// 可正常实例化扩展后的类
const instance = new JumpableTest();
instance.jump(); // 方法调用正常

如果需要显式指定泛型参数，需要传入构造函数类型而非实例类型，写法为：

const JumpableTest = Jumpable<typeof Test>(Test);

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