How can I define a type for a css color in TypeScript?

Question

I have the following example 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.

Answer 1

There was a proposal for a type of string which matches a pattern (regex or something else), but that proposal haven't come to fruition yet.

As a result, what you ask for is unfortunately impossible as of TypeScript 2.2.