

0 / 2 embers
0 / 3000 xp
click for more info
Complete a lesson to start your streak
click for more info
Still calibrating
click for more info
Not enough gems
Cost: 6 gems
1: Unions
incomplete
2: Optional Parameters
incomplete
3: Default Parameters
incomplete
4: Literal Types
incomplete
5: Value Unions
incomplete
6: Template Literal Types
incomplete
7: Giant Unions
incomplete
Back
ctrl+,
Next
ctrl+.
This lesson's interactive features are locked, please to keep using them
So what happens if we create an absolute monstrosity of a union type? It can happen faster than you'd expect... Say we're building a MoveMessage type describing a message about a character's movement in a game:
type Distance = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
type Class =
| "Warrior"
| "Rogue"
| "Mage"
| "Cleric"
| "Paladin"
| "Druid"
| "Hunter"
| "Shaman";
type MoveMessage =
`The ${Class} moves ${Distance}, ${Distance}, ${Distance}, ${Distance}, then ${Distance} spaces.`;
const message: MoveMessage = "The Warrior moves 6, 2, 5, 4, then 7 spaces.";
There's a good chance you'll run into an error like this:
Error: Union type too complex to represent.
This happens because we've tried to create an explicit union of types that has exploded in size. There are hundreds of thousands of possible combinations in the type above. Even if we remove a couple of the Distance values:
type MoveMessage =
`The ${Class} moves ${Distance}, ${Distance}, then ${Distance} spaces.`;
When I hover the MoveMessage type in my editor, I see:
there are still over 5,000 combinations! TypeScript doesn't like that - it can slow down your editor and compilation times to a crawl. So, at a certain point, tsc says "enough is enough".
This is a good example of a phrase you might hear in the TypeScript community: "Type Masturbation". I know it's a bit crass, but I didn't invent the term. It just means that you can go too far with trying to create hyper specific types.
Maybe a string would have sufficed after all.