声明十六进制颜色类型时遇TS2590错误，求解决方案

问题场景 #

在TypeScript 5.2.2版本中，尝试直接拼接单个十六进制字符声明六位十六进制颜色类型时，触发2590错误：Expression produces a union type that is too complex to represent。

原代码如下：

type Hex = '0'|'1'|'2'|'3'|'4'|'5'|'6'|'7'|'8'|'9'|'A'|'B'|'C'|'D'|'E'|'F'|'a'|'b'|'c'|'d'|'e'|'f';
// 触发错误：Expression produces a union type that is too complex to represent
type HexColor = `#${Hex}${Hex}${Hex}${Hex}${Hex}${Hex}`;

解决方案 #

参考@jcalz的思路，通过拆分类型层级降低联合类型复杂度，调整后的实现代码如下：

// 单个十六进制字符
type HexDigit = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' 
  | 'a' | 'b' | 'c' | 'd' | 'e' | 'f' 
  | 'A' | 'B' | 'C' | 'D' | 'E' | 'F';

// 两位十六进制字符对
type HexPair = `${HexDigit}${HexDigit}`;

// 六位十六进制颜色值
type HexColor = `#${HexPair}${HexPair}${HexPair}`;

// 验证示例
const validColor: HexColor = "#1A2b3C"; // 符合类型要求
const invalidColor: HexColor = "#1A2b3G"; // 类型错误，G不是合法十六进制字符

这种方式通过先定义两位的HexPair类型，再组合成完整的颜色字符串，既规避了2590错误，又能准确约束合法的十六进制颜色格式。

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