Type Transformations Workshop (8 exercises)

Use Mapped Types to Create an Object from a Union

The Mapped Type solution includes some new syntax:

The [R in Route] part looks similar to an index, but it isn't.

Instead, it's saying to map over the Route union extract each member into a private variable called R and make it the property's value.

When hovering over RoutesObject, we can see that the Route union's string literals are now the keys and values of the object:

More Mapped Type Examples

Here are a few more experiments and examples to demonstrate how mapped types work.

Assigning Values to string

We could assign the values to be strings instead:

This would create keys using each member of the Route union. However, using string no longer enforces that the values are the members of the union.

Manually Passing a Union

We can also manually pass in a union instead of using Route:

Now hovering over RoutesObject shows us this result:

Passing additional options

We can also pass additional options such as undefined:

Pretty much any union can be mapped over and have an object created from it!

Mapped types are extremely powerful, and are used in some of the patterns that we'll look at later.


[0:00] [0: 00] The solution introduces a few new bits of syntax here. This setup where we have basically an object type here, and inside here we create like an index in here. Except it's not really an index. You can do like index, string is string or something like that. You end up with basically something that's equivalent to Record, string, string, which is where you can add any elements to it and they all have to be strings.
[0:29] [0: 30] Here what we're doing is we're kind of mapping over something. We're saying R in Route is R. What we end up with there is if we hover over it, we can see each of the members. This R in Route, what we're saying basically is for each member of the Route union, extract our R into a private variable, into something that we can access here, and add it as the value.

[0:57] [0: 57] In here, we could have string instead. Now we get the string, about, string, admin, string. Whereas here, what we're doing is we've now got direct access to that R. I can even change this if I want to. I can add something manual in here and say "wow," for instance. Here, what we have then is we're...You see what I mean? We can just map over pretty much any union in here and create an object out of it.

[1:22] [1: 22] This is super fascinating. This map type gives you an enormous amount of power in TypeScript due to some patterns that we can use this for later on. For now, what I want you to think about is how would you use this in your day-to-day practice? What can you create out of this? You notice here, we don't have to pass R. We can pass R or undefined. We can do any sort of manipulation we want to.

[1:50] [1: 51] Let's say we want to make this into this or undefined. You don't have to pass each of these. Then we can do that too. This is an extremely powerful construct, and this is only the beginning.