TypeScript - 是否可以根据模式匹配甚至长度验证字符串类型？

Question

Consider the following component, which uses a library called styled-components to create a prestyled Text component:

const StyledText = styled(Text)`
  font-family: Roboto;
  color: ${(props: ITextProps) => props.color || '#000' }; 
`

where ITextProps is:

interface ITextProps {
  color: string;
}

Is there a way to enforce that only valid hex strings are passed to my component?

Ideally the color prop should always match the pattern /#\\d{3}(\\d{3})?/g , a # followed by at least 3 digits and optionally 3 more digits. If that's not possible, then is there a way to at least enforce that the string is either 4 or 7 characters long?

My research has brought me to a dead end so I'm wondering if anyone on SO might know how I can implement this behavior in TypeScript.

Answer 1

Not at compile-time, no. There is a suggestion to allow regular-expression validated string types, but it's not clear that it will ever be implemented. If you want to go to that suggestion and give it a 👍 or describe a compelling use case that isn't already listed, it couldn't hurt (but it probably won't really help either).

In lieu of official support, you could:

• build an enormous union type of every matching string literal, but that is likely prohibitively expensive for such a wide type:

   type ValidColorString = '#000' | '#001' | '#002' | ... //forget it ☹ 

• Make a nominal-ish subtype of string and use a user-defined type guard to narrow string values to it... and then jump through all sorts of hoops to use it:

   type ValidColorString = string & { __validColorString: true }; function isValidColorString(x: string): x is ValidColorString { const re = /#[0-9a-fA-F]{3}([0-9a-fA-F]{3})?/g; // you want hex, right? return re.test(x); } 

  Usage:

   const textProps: ITextProps = { color: "#abc" }; // error, compiler doesn't know that "#abc" is a ValidColorString const color = "#abc"; if (isValidColorString(color)) { const textProps2: ITextProps = { color: color }; // okay now } else { throw new Error("The world has ended"); } 

The latter isn't perfect, but it at least gets you a bit closer to enforcing such constraints.

Hope that gives you some ideas; good luck!

Answer 2

this is not possible. check discussion on github