link之家
链接快照平台
- 输入网页链接，自动生成快照
- 标签化管理网页链接
如何在TypeScript中定义css颜色的类型？
问
如何在TypeScript中定义css颜色的类型？
EN
EN
Stack Overflow用户
提问于
2017-03-03 16:42:37
回答 7
查看 46.5K
关注 0
票数 33
我有下面的示例代码片段：
代码语言：
javascript
复制
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);">游乐场
如果颜色无效，我将尝试获取生成错误，如下所示：
代码语言：
javascript
复制
var badge = Badge({
color: 'rgba(100, 100, 100)',
text: 'Danger'
});
是否有一种方法可以定义
Color
，使其只允许字符串匹配以下模式之一？
-
#FFF -
#FFFFFF -
rgb(5, 5, 5) -
rgba(5, 5, 5, 1) -
hsa(5, 5, 5)
我意识到有像
red
和
white
这样的颜色，但是如果
Color
能够接受这些，这可能会使这个问题更难回答。
EN
回答 7
Stack Overflow用户
发布于 2022-04-18 09:13:12
代码语言：
javascript
复制
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
票数 41
EN
Stack Overflow用户
发布于 2017-03-03 16:50:02
有一个关于 与模式匹配的字符串类型。 (regex或其他什么的)的建议，但是这个提议还没有实现。
因此，不幸的是，在TypeScript 2.2中，您所要求的是不可能的。
票数 15
EN
Stack Overflow用户
发布于 2017-03-03 18:33:53
从一般意义上说，您还不能这样做，但如果有一组定义良好的颜色，则可以使用常量和字符串文本类型：
代码语言：
javascript
复制
type Color = "#FFFFFF" | "#FF0000" | "#0000FF";
const WHITE: Color = "#FFFFFF";
const RED: Color = "#FF0000";
const BLUE: Color = "#0000FF";显然，如果您想要允许任何颜色，这将是不切实际的，但在现实中，您可能确实希望有可重用的颜色变量无论如何。
在我的项目中，我使用一个脚本从我的
colors.css
文件中生成一个类似的文件，该文件定义了一组CSS属性：
代码语言：
javascript
复制
:root {
--primary-red: #ff0000;
--secondary-red: #993333;
/* etc */
}它被转换为：
代码语言：
javascript
复制
export const primaryRed: Color = "#ff0000";
export const secondaryRed: Color = "#993333";
// etc
export type Color = "#ff0000" | "#993333" // | etc...我会用它就像：
代码语言：
javascript
复制
import {primaryRed} from "./Colors.ts";
interface BadgeProps {
color: Color;
text: string;