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

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

我的尝试如下，但由于实际上不是独立类型而未能实现，而这正是我希望实现的目标。

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 游乐场链接 https://www.typescriptlang.org/play?ts=4.1.0-dev.20200924#code/C4TwDgpgBAEhAeARAlgc2cAPAFSg4EAdgCYDOUA5AAwVQA+lAjLQxQEwuUDMnFALLwCsvAGy8A7LwAcvAJy8AhrwBGvAMa9ivCBVYAzXgEFeAIV4BhXol4BRXZQBiFAHxQAvFGwBuAFChIsAjmAPYANsEATjh48AQk5KTAEciEqK5uPlBZnjFxZFAABgDEACQA3nBIaBiYKXoQEVCIjM4AvuWVKOhYdQ1NbG0dCF01vY2IXIMVw9U9hPXjfFOds7XzfYiCyzPdawtNW60FmdmnAPyeJ6dZAFxQABRX16e4+ET5xUNVu2NNLe3Tb6jdbjAYAlY-EFNSZHJ7PLIXbBw+F3QgQABuDWRWQAlL4fHoAK6ENTAZDBQhQAAWCGib3iUESyVSznupDulRC4Si2GcOLuuDKTwiEGAhIilNIvlaPh8AHo5VBDKFQlB0QpQshiD4afB7hQinojcaKHidQh9YajabfLrLVQHTbzXqDYw2Fw+IIxGa7QaFMo1MQIAYfRaDVQ3UGQ7aw0VDCZzIgbE48UA

尝试使用带有泛型的类型作为独立类型肯定会失败，所以我在这一点上陷入了困境。

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

这是否可以通过 TypeScript 实现，如果可以，如何实现？

您可能已经尝试过以天真的方式做到这一点，将所有可能性结合起来，并且它实际上适用于三位数的十六进制颜色，但不适用于更长的十六进制颜色 https://www.typescriptlang.org/play?ts=4.3.5#code/C4TwDgpgBAIglgczsKBeKByADBqAfTARlwIwCYTMBmSjAFloFZaA2WgdloA5aBOWgIa0ARrQDGtACa0IGUgDNaAQVoAhWgGFaMWgFFaAMQwBuAFChIUAMoALAPYAnYBrsAbR2igADAMQASAG94JGAAX0Dg5HCgxCivMwtoABk7ADsEF3cHT18I2LC8kOjIgpiiwqiKsPjzcGhMj3RbR2c3DwIU9IaHM1MxNIBnFAG7AFsIboAua3snbs8MH3kxCjN%201KGoYQFJKZmW%20fRFsQRVoA（参见下面的代码）。我怀疑，为了直接回答你的问题，不可能创建一个适用于所有六位十六进制颜色的“独立”类型，因为这必须是数百万个元素的联合。

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，所以。该代码稍微简单一些，通过分两步进行条件检查来避免生成太大的联合：

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');

最后，我可能建议你使用类型品牌 https://michalzalecki.com/nominal-typing-in-typescript/#approach-4-intersection-types-and-brands创建一个类型，表示字符串是有效的十六进制颜色，并且仅使用您的hex函数来创建该类型的字符串？在下面的示例中，您可以简单地使用Color整个代码库，只需要依赖hex专门制作时的辅助函数Color第一次从字符串文字。我不知道这是否能满足您的理想用例，因为您仍然需要使用您的hex在声明文字的任何地方都可以使用 helper ，但它可以让您非常接近：

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'),
};