Loading
Current section: 5. Utility Types 6 exercises
solution

Creating Mapped Types

Transcript

00:00 All done? Alright. Great. Then let's get to it. We're gonna make our own version of partial.

00:05 So we're gonna say type my partial is going to accept a type, which like I said before, I don't typically like doing single letter, type names, but it's so common in typescript. I think I'm starting to get to the point where I'm fighting against my better judgment, but I'm just gonna do this anyway. Type and then we're gonna call this key. It's really not that hard. Right?

00:29 So what this is doing is it's saying, let's make an object that has keys and key of type. So whatever the the keys that are inside that type object, make one for each one of those and we're gonna make them optional. So that's the question mark. And then the value is going to be whatever the value is, for that type at that key. And that makes our partial.

00:54 So if we come down here, we're gonna say my partial user and there we go. All all of those items are optional. Very good. So, now, let's make my required. So, what this does, it's very similar, a similar sort of thing, key and key of type.

01:08 And we're gonna say not optional. So we've got a couple oh, actually, we don't have any optional ones in here. Let's, let's toss a couple optional ones in here because the user is required everywhere. So h, we're saying on the user, to not require oh, actually, no. We're we're using the partial user.

01:26 Back it up, back it up, back it up. There we go. Partial user. We're gonna pass that back and now everything is required again. So it was partial and now it's required.

01:34 Ta da. Sweet. Okay. So now, we're gonna say all the keys in the user are nullable. So, now we're gonna iterate each over each key in that type and we're gonna say the value is the value of that type at that key or it's null.

01:49 Pretty straightforward. So here's our nullable user each, oh my nullable. There we go. And each one of the user's properties are now either that property's value or null. Okay.

02:01 And then we can make our my mutable. So what this is doing is it's undoing the read only value that we're setting in this read only user. And so now, we can say mutable read only, my mutable, read only user. That's gonna be where whereas before each one was read only, now they are mutable. So you could create a version of this object that, you can modify.

02:25 And then finally, we're gonna stringify. We're gonna use my stringify to stringify the user. This is effectively taking all of those properties and setting it to be a string. So whereas user had string and number, now everything is a string even for the age. And, yeah, if you want some extra practice with all of this, I would recommend going to the TypeScript docs, looking at all the utility types, and just seeing how many of those things you can reimplement.

02:54 And of course, like your AI agent is gonna be able to reimplement lots of these things just like it did for me here. But the key is being able to look at and understand how that all of that works. And if you ever don't know, then you can select that, put it into an agent, be like, help me understand what is going on here, and it will do a great job. The the key to this is reps. So just keep on putting that repetition and you'll do great.

03:19 Awesome job on this one.