TypeScript泛型报错Type 'T' is not assignable to type 'number'求助

问题根因 #

报错的核心原因是你在Vector类上声明的泛型T和operatorFunc要求的入参类型不匹配：

• operatorFunc的第一个参数是泛型T extends Vector，要求第二个参数必须和第一个参数是相同类型T或者数字
• 你在add方法里传入的第一个参数是this，对应TS的多态this类型（子类继承时会自动适配为子类类型），和类上声明的泛型T没有关联，因此触发类型校验失败。

解决方案 #

你不需要额外给Vector定义泛型参数，直接使用TS原生的多态this类型即可满足「方法返回和调用实例相同类型」的需求，同时可以彻底移除所有as any断言，修改后的完整代码如下：

// 给参数补全类型，constructor断言为对应构造类型，移除any
export const operatorFunc = <T extends Vector>(
  p: T,
  p2: T | number | { x: number; y: number },
  operator: (a: number, b: number) => number
): T => {
  let _p2: { x: number; y: number };
  if (typeof p2 === "number") {
    _p2 = { x: p2, y: p2 };
  } else if ("x" in p2 && "y" in p2) {
    _p2 = p2;
  } else {
    _p2 = { x: p2.x, y: p2.y };
  }
  const Constructor = p.constructor as new (x: number, y: number) => T;
  return new Constructor(operator(p.x, _p2.x), operator(p.y, _p2.y));
};

class Vector {
  x: number;
  y: number;

  // 移除不必要的泛型声明，直接用Vector类型约束入参
  constructor(x: number | Vector | { x: number; y: number }, y?: number) {
    if (typeof x === "number") {
      this.x = x;
      this.y = y ?? 0;
    } else {
      this.x = x.x;
      this.y = x.y;
    }
  }

  // 入参用this类型，自动适配当前实例类型（包括子类）
  add(p: this | number | { x: number; y: number }) {
    return operatorFunc(this, p, (x, y) => x + y);
  }
}

class Dir extends Vector {
  // 你的自定义方法
}

// 以下用法全部符合类型要求
let v1 = new Vector(1, 2); // 2个参数
let v2 = new Vector({ x: 10, y: 20 }); // 带x、y属性的对象
let v3 = new Vector(v1); // 克隆

let v1a = v1.add(10); // 类型为Vector
let v1b = v1.add(v2); // 类型为Vector

let d1 = new Dir(v1); // 类型为Dir
let d2 = d1.add(10); // 类型为Dir，符合要求

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