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.
More Tips
Type Predicates
1 min
TypeScript 5.1 Beta is OUT!
2 mins
How to Name your Types
4 mins
Don't use return types, unless...
4 mins
TypeScript 5.0 Beta Deep Dive
6 mins
Conform a Derived Type Without Losing Its Literal Values
1 min
Avoid unexpected behavior of React’s useState
1 min
Understand assignability in TypeScript
2 mins
Compare function overloads and generics
1 min
Use infer in combination with string literals to manipulate keys of objects
1 min
Access deeper parts of objects and arrays
1 min
Ensure that all call sites must be given value
1 min
Understand how TypeScript infers literal types
1 min
Get a TypeScript package ready for release to NPM in under 2 minutes
1 min
Use assertion functions inside classes
1 min
Assign local variables to default generic slots to dry up your code and improve performance
2 mins
Know when to use generics
2 mins
Make accessing objects safer by enabling 'noUncheckedIndexedAccess' in tsconfig
1 min
Use generics to dynamically specify the number, and type, of arguments to functions
1 min
Use 'declare global' to allow types to cross module boundaries
2 mins
Turn a module into a type
2 mins
Create autocomplete helper which allows for arbitrary values
2 mins
Use deep partials to help with mocking an entity
1 min
Throw detailed error messages for type checks
1 min
Create a 'key remover' function which can process any generic object
1 min
Use generics in React to make dynamic and flexible components
1 min
Create your own 'objectKeys' function using generics and the 'keyof' operator
1 min
Write your own 'PropsFrom' helper to extract props from any React component
1 min
Use 'extends' keyword to narrow the value of a generic
1 min
Use function overloads and generics to type a compose function
2 mins
Decode URL search params at the type level with ts-toolbelt
2 mins
Use 'in' operator to transform a union to another union
2 mins
Derive a union type from an object
2 mins