如何在TypeScript中定义css颜色的类型？
如何在TypeScript中定义css颜色的类型？
提问于 2017-03-03 16:42:37
我有下面的示例代码片段：
type Color = string;
interface Props {
color: Color;
text: string;
}
function Badge(props: Props) {
return `<div style="color:${props.color}">${props.text}</div>`;
}
var badge = Badge({
color: '#F00',
text: 'Danger'
});
console.log(badge);`; } var badge = Badge({ color: '#F00', text: 'Danger' }); console.log(badge);">游乐场
如果颜色无效，我将尝试获取生成错误，如下所示：
var badge = Badge({
color: 'rgba(100, 100, 100)',
text: 'Danger'
});是否有一种方法可以定义Color，使其只允许字符串匹配以下模式之一？
#FFF#FFFFFFrgb(5, 5, 5)rgba(5, 5, 5, 1)hsa(5, 5, 5)
我意识到有像red和white这样的颜色，但是如果Color能够接受这些，这可能会使这个问题更难回答。
回答 7
Stack Overflow用户
发布于 2022-04-18 09:13:12
type RGB = `rgb(${number}, ${number}, ${number})`;
type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`;
type HEX = `#${string}`;
type Color = RGB | RGBA | HEX;${...}符号可用于新版本(^4.1) ts。
https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html
Stack Overflow用户
发布于 2017-03-03 16:50:02
有一个关于与模式匹配的字符串类型。 (regex或其他什么的)的建议，但是这个提议还没有实现。
因此，不幸的是，在TypeScript 2.2中，您所要求的是不可能的。
Stack Overflow用户
发布于 2017-03-03 18:33:53
从一般意义上说，您还不能这样做，但如果有一组定义良好的颜色，则可以使用常量和字符串文本类型：
type Color = "#FFFFFF" | "#FF0000" | "#0000FF";
const WHITE: Color = "#FFFFFF";
const RED: Color = "#FF0000";
const BLUE: Color = "#0000FF";显然，如果您想要允许任何颜色，这将是不切实际的，但在现实中，您可能确实希望有可重用的颜色变量无论如何。
在我的项目中，我使用一个脚本从我的colors.css文件中生成一个类似的文件，该文件定义了一组CSS属性：
:root {
--primary-red: #ff0000;
--secondary-red: #993333;
/* etc */
}它被转换为：
export const primaryRed: Color = "#ff0000";
export const secondaryRed: Color = "#993333";
// etc
export type Color = "#ff0000" | "#993333" // | etc...我会用它就像：
import {primaryRed} from "./Colors.ts";
interface BadgeProps {
color: Color;
text: string;
}
var badge = Badge({
color: primaryRed,
text: 'Danger'
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42584228
复制相关文章
相似问题
腾讯云开发者
