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

有没有办法定义颜色,以便它只允许匹配以下模式之一的字符串？

> #FFF
> #FFFFFF
> rgb(5,5,5)
> rgba(5,1)
> hsa(5,5)

我意识到有红色和白色等颜色,但如果Color可以接受那些颜色,那么这可能会更难回答.