Concatenate string combinations in typescript

Question

I have a lot of (tailwind) color strings, which I would like to restrict my type system to. For demo purposes I just display 3*3 here:

text-red-500    text-red-700    text-red-900
text-amber-500  text-amber-700  text-amber-900
text-yellow-500 text-yellow-700 text-yellow-900

I would like to do something like:

type Color = "red" | "amber" | "yellow"
type Tint = "500" | "700" | "900"
type TailwindColor = "text-" + Color + "-" + Tint

Is there a way for me to do this in Typescript?

Titian Cernicova-Dragomir · Accepted Answer · 2023-01-19 15:40:36Z

3

You can use template string types:

type Color = "red" | "amber" | "yellow"
type Tint = "500" | "700" | "900"
type TailwindColor = `text-${Color}-${Tint}`

Playground Link

You should take care though such combinatorial unions will tend to slow down the compiler if they get to large, and there are limits to the maximum size of a union that TypeScript will allow (not sure what it is, but there is a hard limit, ex)

answered Jan 19, 2023 at 15:40

Titian Cernicova-Dragomir

253k37 gold badges465 silver badges395 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Concatenate string combinations in typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related