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

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 playground link
尝试使用具有泛型的类型作为独立类型肯定会失败，所以我在这一点上卡住了。

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

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

Answer 1

您可能已经尝试过以天真的方式进行操作，将所有可能性和 it does actually work for a three-digit hex color, but not for a longer one 结合起来(请参阅下面的代码)。我怀疑，直接回答您的问题，不可能制作适用于所有六位十六进制颜色的“独立”类型，因为这必须是数百万个元素的联合。

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，因此 I made a slight modification to it so that it does work with the latest version, 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');

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

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

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