Map over a union type
I've got a puzzle for you!
export type Letters = "a" | "b" | "c"type RemoveC<TType> = anytype 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.
Transcript
0:00 I've got a puzzle for you. I've got three letters at the top here that are all expressed as a union. This letter can be either one of A, B, or C. I want to create a type helper to remove one of the letters. How do I do that? You think of, when something is an object or something is an array, you can usually map over it. There's some kind of iterator you can use.
0:23 What's the iterator when it comes to unions? How do I map over each member of the union? It turns out that TypeScript does this automatically, and this what's called distributivity in TypeScript. The way this works is we can actually treat these letters as though they were one thing, as though they were, for instance, just C, let's say.
0:46 The way we're going to do that is we're just going to check T type. We're going to check if T type 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 union. When you add never to a union, it just removes itself, basically.
1:06 Then, if it doesn't extend C, we're going to return T type. Now, while without C, it's just A or B. Now, that's unexpected, because you would think that T type, C is part of these letters. You would think, "OK, T type does extend C, because C is included, so let's return never."
1:27 No, actually, automatically maps over each member of the union when it's doing a conditional type check like this. This means that we can return different members of the union or manipulate them. We can actually just return D, for instance. Now, while without C is A, B, or D.
1:43 This is pretty exciting, because it means that you can really tear into unions and do lots of really smart things with them.
Mapping over a union type can feel tricky to conceptualise. But actually, TypeScript does it all for you - using Distributive Conditional Types.
Here, we create RemoveC - a type helper to remove c from a union of letters.