Question

我有以下示例代码段：

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

Playground

如果颜色无效，我试图获取构建错误，如下所示：

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可以接受这些颜色，则可能会更难回答。

Answer 1

有a type of string which matches a pattern（正则表达式或其他）的提案，但该提案尚未实现。

因此，从TypeScript 2.2开始，您要求的内容很不可能。

Answer 2

在一般意义上你不能做到这一点，但如果你有一套明确定义的颜色，你可以使用常量和字符串文字类型：

type Color = "#FFFFFF" | "#FF0000" | "#0000FF";
const WHITE: Color = "#FFFFFF";
const RED: Color = "#FF0000";
const BLUE: Color = "#0000FF";

显然，如果你想允许任何颜色，这是不切实际的，但实际上你可能做想要有可重复使用的颜色变量。< / p>

在我的项目中，我使用脚本从我的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'
});

如何在TypeScript中为css颜色定义类型？

2 个答案: