Objects 16 exercises
solution

Records and Mapped Types in TypeScript

We know that the values of the Configurations object will be apiBaseUrl, which is a string, and timeout, which is a number. These key-value pairs are added to the Configurations type like so:


type Configurations = {
apiBaseUrl: string;
timeout: number;
};

We could try t

Loading solution

Transcript

00:00 Okay, so we know that the members of this or the values of this object are going to be API base URL, which is string and timeout, which is number. So let's just add those into here, for instance, API base URL, grab that, call that string and timeout, which is going to be a number.

00:19 Okay, but now, of course, we need to wrap this in something to make sure that it's going to be kind of reliant on environment as its keys. So we can use the record type for this. And you might think, okay, record string, and then add our kind of object into here. This is pretty good.

00:36 Except, of course, we're not getting an error on not allowed. This is now an object with those keys as strings there. But what if we just want to restrict it to be the environment that's the key? Well, we can just grab environment and stick it inside that record. Nice. Now, configurations

00:54 is going to be exactly what we think it is. And this not allowed is not going to be allowed, because not allowed does not exist in type configurations. It can only be development, production and staging. If we add another one here, for instance, like QA, then it's going to require us to pass in QA into here. So not allowed is still erroring. But if I comment this out,

01:13 then it's going to error up here and saying property QA is missing in here. And I would have to add it to my setup. So this is how basically you get a record of keys where you have a union as keys. That's really, really useful. You can also use this syntax. Now this syntax is a slightly

01:32 more advanced, but it's basically unbundling what record does under the hood. And this is using what's called a mapped type. I'm not sure we're going to cover map types in kind of like great detail in this section, but I wanted to show you the kind of syntax here because it's pretty useful

01:48 to know. It's kind of like an index signature, but instead of using, you could use, I guess, index environment like this, but actually index signature parameter type cannot be a literal type or a generic type. Consider using a mapped object type instead. What this ends up meaning is you

02:06 can't use a union of literals inside an index signature. It has to be basically this kind of syntax where we say for each env in environment, we get access to the env here inside this little closure there. So we can actually say API base URL env if we want to. And now these, this would have

02:25 to be development here and the production one would have to be production and the staging one would have to be staging. Whereas we're not actually using the env here, but we still need it to map over each member of the environment union. So this one's a little bit more advanced as you can probably tell, and it's totally equivalent to this record. And this record

02:44 of environments is a super nice way that you can turn literal unions into object keys. Really nice.