TypeScript条件类型无需as const的实现方案咨询

问题场景 #

在使用条件类型实现颜色值映射函数时，遇到以下问题：

• 直接传入字符串字面量（如'black'）或普通const字符串变量时，TypeScript无法识别为合法的颜色类型，返回类型错误推断为'Error'
• 只有添加as const修饰符才能得到正确的ColorValue类型
• 限制泛型为string会导致无法接收任意类型参数，且对unknown类型处理异常

原代码示例：

const resistanceColor = [
  { color: "black", value: 100 },
  { color: "brown", value: 200 },
  // ...其他颜色
] as const;

type Color = typeof resistanceColor[number]['color'];
type ColorValue = typeof resistanceColor[number]['value'];
type Res<S> = S extends Color ? ColorValue : 'Error';

export function colorCode<S>(color: S): Res<S> {
  const value = resistanceColor.find((item) => item.color === color)?.value;
  if (value === undefined) {
    return 'Error' as Res<S>;
  }
  return value as Res<S>;
};

// 错误示例：合法颜色却返回Error类型
const err = colorCode('black');
const color_err = 'black';
colorCode(color_err); 

// 正确但繁琐：需要加as const
const annoying = colorCode('black' as const);

核心原因 #

TypeScript默认会将字符串字面量和未标注类型的const字符串变量拓宽为string类型，而string并不属于Color（字面量联合类型）的子集，因此条件类型S extends Color判断为false，返回'Error'类型。

解决方案：使用const类型参数 #

利用TypeScript 5.0+支持的const类型参数，让TypeScript自动窄化类型推断，保留字面量类型，无需手动添加as const：

export function colorCode<const S>(color: S): Res<S> {
  const value = resistanceColor.find((item) => item.color === color)?.value;
  if (value === undefined) {
    return 'Error' as Res<S>;
  }
  return value as Res<S>;
};

效果验证 #

const ok = colorCode('black'); // 类型为ColorValue（正确）
const color_ok = 'black';
colorCode(color_ok); // 类型为ColorValue（正确）
const errorCase = colorCode('banana'); // 类型为'Error'（正确）
colorCode([] as unknown); // 类型为'Error'（正确）
let unknownVar: unknown = [];
colorCode(unknownVar); // 类型为'Error'（正确）

原理说明 #

const类型参数会告诉TypeScript：

1. 对传入的字面量参数，直接推断为对应的字面量类型（如'black'而非string）
2. 对const变量，保留其字面量类型而非拓宽为通用类型
3. 同时保持函数对任意类型参数的兼容性，不会像S extends string那样限制参数类型

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