如何阻止TypeScript将泛型推断为字面量数字？

问题分析 #

你创建的类支持两种颜色类型：十六进制数字（number）和RGB数组（number[]），但传入十六进制值时，TypeScript会将泛型推断为字面量数字类型（比如0xff00ff被推断为16711935而非number），导致后续给color赋值其他十六进制值时出现类型不兼容错误：

Type '16711680' is not assignable to type '16711935'

解决方案 #

无需手动指定泛型<number>，可以通过以下几种方式让TypeScript自动将数字推断为number类型而非字面量：

方案1：使用NoInfer类型约束泛型（TypeScript 5.4+） #

TypeScript 5.4及以上版本提供的NoInfer工具类型，可直接阻止字面量推断：

class MyClass<T extends number | number[]> {
  private _color: T;

  constructor(options: { color: NoInfer<T> }) {
    this._color = options.color;
  }

  get color(): T {
    return this._color;
  }

  set color(value: T) {
    this._color = value;
  }
}

// 0xff00ff自动推断为number，而非字面量16711935
const instance = new MyClass({ color: 0xff00ff });
instance.color = 0xff0000; // 无类型错误

方案2：类型断言强制数字为number（兼容低版本TS） #

如果使用的TypeScript版本低于5.4，可通过类型断言在构造函数中强制转换字面量类型：

class MyClass<T extends number | number[]> {
  private _color: T;

  constructor(options: { color: T }) {
    this._color = options.color as T extends number ? number : T;
  }

  get color(): T {
    return this._color;
  }

  set color(value: T) {
    this._color = value;
  }
}

const instance = new MyClass({ color: 0xff00ff as number });
instance.color = 0xff0000; // 无类型错误

方案3：调整泛型默认类型与约束 #

通过给泛型设置默认类型，引导TypeScript优先推断宽泛的number类型：

class MyClass<T extends number | number[] = number | number[]> {
  private _color: T;

  constructor(options: { color: T }) {
    this._color = options.color;
  }

  get color(): T {
    return this._color;
  }

  set color(value: T) {
    this._color = value;
  }
}

const instance = new MyClass({ color: 0xff00ff });
instance.color = 0xff0000; // 无类型错误

原理说明 #

TypeScript默认会对字面量值进行最精确的类型推断（比如字面量数字、字符串），通过NoInfer、类型断言或调整泛型约束，可以引导TypeScript推断更宽泛的number类型，从而允许后续赋值不同的数字值。

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