Code snippet:
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
I'm trying to get a build error if the color is invalid, like so:
var badge = Badge({
color: 'rgba(100, 100, 100)',
text: 'Danger'
});
Is there a way to define Color so that it allows only strings matching one of the following patterns?
- #FFF
- #FFFFFF
- rgb(5, 5, 5)
- rgba(5, 5, 5, 1)
- hsa(5, 5, 5)
I realize that there are colors like red and white but that might make this harder to answer if Color can accept those.