字符串文字类型与字符串类型的联合

Question

I want to use the intellisense of typescript on some predefined colors in my component's prop. But user can also pass any hex color into that prop too.

type PREDEFINED_COLORS = 'success' | 'error' | 'info';

type Props = {
   color: PREDEFINED_COLORS | string;
}

I know PREDEFINED_COLORS is also a string but i believe there should be some workarounds to achieve the benefits of intellisense.

Do you have any suggestions?

Answer 1

Your safest bet would be to use a templated string type . Something like this:

type PREDEFINED_COLORS = 'success' | 'error' | 'info';

type Props = {
   color: PREDEFINED_COLORS | `#${string}`;
}

You may try to narrow the type even more, creating a hexDigit and then building the entire type from there. Something like this:

type hexDigit = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | 'a' | 'b' | 'c' | 'd' | 'e' | 'f'
type hexColor = `#${hexDigit}${hexDigit}${hexDigit}${hexDigit}${hexDigit}${hexDigit}`

The problem with this is that TS will generate the entire crossproduct of the hexDigit type and that will end up being a huge type. More exactly it will have 2^32 items which is way above the 100k limit they have. You can more about this here .