如何为十六进制颜色字符串创建独立类型？

Question

我正在尝试在 TypeScript 中创建一个独立类型，该类型可用于将单个有效的 HEX 颜色代码表示为完全类型安全的字符串。

我的尝试如下，由于实际上不是独立类型，因此未能实现，这是我希望实现的。

type HexDigit<T extends '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | 'a' | 'b' | 'c' | 'd' | 'e'| 'f' | 'A' | 'B' | 'C' | 'D' | 'E'| 'F'> = T;
type HexColor<T extends string> =
    T extends `#${HexDigit<infer D1>}${HexDigit<infer D2>}${HexDigit<infer D3>}${HexDigit<infer D4>}${HexDigit<infer D5>}${HexDigit<infer D5>}`
        ? T
        : (
            T extends `#${HexDigit<infer D1>}${HexDigit<infer D2>}${HexDigit<infer D3>}`
            ? T
            : never
        );

function hex<T extends string>(s: HexColor<T>): T {
    return s;
}

// All valid
hex('#ffffff');
hex('#fff');
hex('#000');
hex('#123456');
hex('#abcdef');
hex('#012def');
hex('#ABCDEF');

TypeScript 游乐场链接

尝试使用具有泛型的类型作为独立类型肯定会失败，所以我在这一点上被卡住了。

// Ideal use case - does not compute
const color: HexColor = '#aaa';
const theme: Record<string, HexColor> = {
    backgroundColor: '#ff0000',
    color: '#0f0',
};

这甚至可以通过 TypeScript 实现，如果可以，如何实现？

Answer 1

您可能已经尝试过以天真的方式做到这一点，即对所有可能性进行联合，并且它实际上适用于三位数的十六进制颜色，但不适用于更长的颜色（请参见下面的代码）。我怀疑，为了直接回答你的问题，不可能制作一个适用于所有六位十六进制颜色的“独立”类型，因为这必须是数百万个元素的联合。

type Digit = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | 'a' | 'b' | 'c' | 'd' | 'e'| 'f' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F';
type ShortColor = `#${Digit}${Digit}${Digit}`;
type LongColor = `#${Digit}${Digit}${Digit}${Digit}${Digit}${Digit}`;  // Error
type Color = ShortColor | LongColor;

const someColor: ShortColor = '#fc2';
const badColor: ShortColor = '#cg2';  // Error

也就是说，我认为你的解决方案本身就是一个很好的解决方案。我确实注意到您的代码无法在较新版本的 TypeScript 上运行，因此我对其进行了轻微修改，以便它可以在最新版本 4.4.0-beta 上运行。代码稍微简单一些，通过分两步进行条件检查来避免生成太大的联合：

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 HexColor<T extends string> =
    T extends `#${HexDigit}${HexDigit}${HexDigit}${infer Rest1}`
        ? (Rest1 extends `` 
            ? T // three-digit hex color
            : (
                Rest1 extends `${HexDigit}${HexDigit}${HexDigit}`
                    ? T  // six-digit hex color
                    : never
            )
        )
        : never;

function hex<T extends string>(s: HexColor<T>): T {
    return s;
}

// All valid
hex('#ffffff');
hex('#fff');
hex('#000');
hex('#123456');
hex('#abcdef');
hex('#012def');
hex('#ABCDEF');

最后，我可能建议您使用类型品牌来创建一个类型，该类型表示字符串是有效的十六进制颜色，并且仅使用您的hex函数来创建该类型的字符串？在下面的示例中，您可以简单地在整个代码库中使用，并且仅在第一次专门从字符串文字创建 a 时才Color需要依赖辅助函数。我不知道这是否能满足您确切的理想用例，因为您仍然需要在声明文字的地方使用助手，但它让您非常接近：hexColorhex

type Color = string & { __type: "HexColor" };
function hex<T extends string>(s: HexColor<T>): Color {
    return s;
}

const color: Color = hex('#aaa');
const theme: Record<string, Color> = {
    backgroundColor: hex('#ff0000'),
    color: hex('#0f0'),
};