I've got a puzzle for you!


export type Letters = "a" | "b" | "c"

type RemoveC<TType> = any

type WowWithoutC = RemoveC<Letters>

I've got three letters at the top here that are all expressed as a union. So this can be either one of a b or c, and I want to create a type helper to remove one of the letters.

So how do I do that? You'd think of when something is an object or array you can usually kind of map over it.

But what's the iterator when it comes to unions? How do I map over each member of the union?

Well it turns out that typescript does this automatically. It's called distributivity. The way this works is we can actually treat these letters as though they were just one thing. For instance, we can treat them as just "c".

To do this, we're just going to check TType. We'll check if TType extends c, and if not we're going to return never, because never means that it can never be c.

We're trying to remove it from the union and when you add never to a union. It just removes itself basically and then if it doesn't extend "c" we're going to return TType


type RemoveC<TType> = TType extends "c" ? never : TType

And now while without c, it's just a or b. That's unexpected because you would think that, like TType, c is part of these letters, so you would think TType does extend c because c is included so let's return never

But no. TypeScript actually automatically maps over each member of the union when it's doing a conditional type check.

This means that we can return different members of the union or manipulate them so we can actually just return d for instance


type RemoveC<TType> = TType extends "c" ? "d" : TType

So now, while without c, it is a, b or d and this is pretty exciting because it means that you can really tear into unions and do lots of really smart things with them.