Intermediate TypeScript

Intermediate TypeScript Pick & Mapping Modifiers

Learning Paths:
Check out a free preview of the full Intermediate TypeScript course:
The "Pick & Mapping Modifiers" Lesson is part of the full, Intermediate TypeScript course featured in this preview video. Here's what you'd learn in this lesson:

Mike demonstrates using the built in utility type Pick and applying and removing modifiers with - and ?. A brief overview of modifying the built in utilities Partial, Required, and Readonly are also covered in this segment.

Get Unlimited Access Now

Transcript from the "Pick & Mapping Modifiers" Lesson

>> Well, we have arrived at another built- in type that TypeScript includes, and that is Pick. So if we look at the built in pick up here, and the pick properties that we made, they're basically the same type parameter names aside. ValueType is going to be the T, as you can see it here and you can see here,ValueType is here, and here or also, there's a Keyof T and a Keyof ValueType, and then here we're creating over the keys.

[00:00:36] So that's how pick works. It like where for record, we just needed the map type. Here we're using this indexed access type to grab something off of something else, if that makes sense. We're using that square bracket notation. We're saying, here's document, give me document, right? Record if we look at it one more time, it was just a consistent thing we were always placing there, like, it's always going to be the same.

[00:01:15] Whereas here we're kind of like Were using a different key. And so as a result, what comes out like these are obviously different types. Document, navigator, set timeout. That's what this index access type gives us when used with a map type. Let's talk about mapping modifiers. These are just kind of something potentially to memorize or just remember that it exists, but not not an incredibly abstract concept.

[00:01:46] So, the way to think about this is, as we loop over in our map type, as we loop over all the keys, we have the option to determine whether the ValueType should be read only or optional. There are two independent things. You can be read only and optional or you can be non optional and writable like they're totally independent.

[00:02:15] So, you're gonna see that we will find a question mark in some of these code example and the word read only. So here, this is a built in type. We're going straight to the built in types here because these are kind of less interesting to build up. But this is the key.

[00:02:33] This is the thing that makes partial different from pick. While there are a couple things, first off. Pick, lets see you specify which keys you would like. Here, we're iterating over all the keys in type T. And over here, we're saying the value may or may not be there.

[00:03:02] So that's partial, and this is the opposite of partial. The only thing that changes is we have a minus sign. It's almost like we're removing the optionalness as we loop over. This is a very weird thing like, a rare thing to for you to put into your own types.

[00:03:19] But that's how this works, right? It's just that and then read only here. So this would, it doesn't really freeze the object. Just remember that TypeScript disappears as part of your build process. And so at runtime like this might actually be a writable thing. But this would type check it.

[00:03:42] So create a version of something that is read only. Maybe it's an options, object that you're passing to function or some object you're passing in a function. You want to make sure that you don't modify it, like mutate the thing that you were passed, you might make it read only so that when you receive it, you'll be called out.

[00:04:02] If you ever try to mess with something that really should live in your stack, right? Now there's no built in type for removal of read only you could implement it like this, but is not necessarily a good idea. It's probably if someone made something read only, might want to figure out what that reason is they probably don't want it messed with.

[00:04:27] But just showing you that there is continuity here in terms of question mark and read only they both work with this minus sign. Just know that the positioning of these. So this is fairly easy to remember because it's the same location of that question marked as optional class fields or optional object literal properties.

[00:04:51] And read only that's always to the left cuz it's kind of like where you would put an access modifier keyword in a class field or a method it's like public read only function,.