如何为十六进制颜色字符串创建独立类型？
我正在尝试在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');尝试使用带有泛型的类型作为独立类型肯定会失败，所以我被困在了这一点上。
// Ideal use case - does not compute
const color: HexColor = '#aaa';
const theme: Record<string, HexColor> = {
backgroundColor: '#ff0000',
color: '#0f0',
};这可以通过TypeScript实现吗?如果可以，如何实现？
回答 1
Stack Overflow用户
发布于 2021-08-13 06:46:53
您可能已经尝试过天真的方式，将所有可能性和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，并且只需要在第一次从字符串文字专门生成Color时依赖于hex助手函数。我不知道这是否会满足您的理想用例，因为您仍然需要在声明文本的地方使用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'),
};https://stackoverflow.com/questions/68766792
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号