Type CSS and HTML lengths with templates

I would like to make a suggestion, to make the types more specific for HTML and CSS lengths.

Presently, attributes such as height are typed as being string. They have to allow string rather than number because of the measurement that follows a number, such as 10px or 1.2rem.

I think this can be improved using Typescript templates, by doing something like this instead:

type Length = number | `${number}${'px'|'ch'|'pt'|'cm'|'in'|'em'|''}`;

interface SomeElement {
    height?: Length
}

This would result in:

<SomeElement height={'5px'} /> // allowed
<SomeElement height={'asdf'} /> // compile time error

If this is agreed upon, I will start implementing it.

[orta]

Yeah, I think this makes sense (thanks @HolgerJeromin) maybe I can make this idea live on in a TypeScript Halloween Code challenge this week

[mrbrianevans]

Ah alright, that makes sense. I had not considered such examples.

I am closing this issue, as it seems it would cause many breaking changes to existing projects using Typescript.