So in the last lesson, we extracted some common types out into its own type files that can be shared by numerous components. We have some leftover types in this file that are pretty close to some of those shared types, but, but they're not quite the same thing. For example, the song model has created at and updated at, and this one doesn't, right? Tags are required here. They're optional here. So there are some subtle differences between these two,

Tags are required here. They're optional here. So there are some subtle differences between these two, but they're mostly the same. Stay with me here. But there's ways to reuse the types even though they are slightly different. Let's take a look. So I'm gonna introduce you to a couple of utility types in TypeScript. These are built into TypeScript and can use them to manipulate the various types to your liking.

and can use them to manipulate the various types to your liking. So let's try it out. We're gonna create a new song key here, and we're just going to comment this out. We want most of the properties from the song model, but we don't want all of them. So there's a couple of ways to do this. Let's put these two things side by side for a second. So the first way we're gonna do this is use the TypeScript

Let's put these two things side by side for a second. So the first way we're gonna do this is use the TypeScript pick utility and let's check that out. So pick and so pick, pick a set of properties whose keys are in the union. K Marty, you're like, hmm, I dunno about this, but it's gonna be great. So we have song model, right? So that's the, that's the type we're looking at and we want to pick properties off of that, right?

So that's the, that's the type we're looking at and we want to pick properties off of that, right? So properties like album artists, right? So we can grab all of the stuff we want here and grab them in the union and it should work. So if I grab this, and I put this here, now, song should be these particular properties from song model, right?

song should be these particular properties from song model, right? So id URL title. These should be picked from song model. So let's see if that's actually true. So if we have song dot, yep. So we're getting all the same thing and now they share a type. So if song model updates, this will automatically update. Okay, let's keep going. We now need the tags, right?

Okay, let's keep going. We now need the tags, right? So tags we need, but tags is optional in the song model, but we know it's required. We know it's coming back here. So how do we do that? Well, to make optional properties required, there is a required utility, right? And it will automatically convert anything that is optional to now be required. So we're gonna do, and

to now be required. So we're gonna do, and because we want the uh, intersection between this top type and the type we're about to make. So we want all of them combined. And we're gonna say required right now we're going to pick, so we're nesting a little bit. Song model, and then tags. Okay, so now tags should be a required field song tags.

Okay, so now tags should be a required field song tags. Entries, right? So now there's no, there's no question mark here. It just knows this is okay, this is, this is going to be here. I am sure of it. Okay? So another way of doing this, if the vast majority of your object is going to be used, uh, you can actually use omit instead of pick.

of your object is going to be used, uh, you can actually use omit instead of pick. And that's the opposite. So at this point, it will omit all of these keys as opposed to pick all of these keys. So really the only things we want to omit are created at and update it at. So we can just grab those created at, updated at, and now we should get the same result, right? So now we have everything there except

and now we should get the same result, right? So now we have everything there except for created at and updated at. So pick picks keys off of the type and retains their types. Omit does the opposite. It rejects the keys that you have. Okay, so now we can get rid of this. And now we've got the same thing. I just wanna say that I totally understand that this is starting to look a little bit like that package type script that we were talking about in the first lesson.

starting to look a little bit like that package type script that we were talking about in the first lesson. You don't have to do any of this. You can construct your types in such a way that allows you to avoid this. I'm just showing you some options in case you wanna dive a little bit deeper and reuse types in a completely different way. Now let's talk about form data. This has a couple of challenges here

Now let's talk about form data. This has a couple of challenges here because uh, some of this is required, some of this is optional and some of this is nullable. So we're dealing with a completely different shape. And I don't know if I would necessarily reuse the song model in the same way. But for the sake of the lesson and for the sake of learning, we're going to do it. So update form data.

and for the sake of learning, we're going to do it. So update form data. We're going to just duplicate this, move this down and comment it out so we have it as a reference. So we already know that we can grab pick, right? So we're gonna do pick song model and we're gonna grab the URL and the title, right? So that that takes care of our two required fields here.

So that that takes care of our two required fields here. Uh, next we want to have these particular fields. So we can use pick again, and then we can combine that with another TypeScript utility called partial. And partial is the opposite of required. Required makes all properties of t of the, of the, the type that you're looking at required and partial makes all of them unrequired

that you're looking at required and partial makes all of them unrequired and makes them optional, meaning they could be undefined. So let's keep going here and we'll do partial and then we'll pick again and then we'll say song model, right? And then we're going to pick these particular fields out. Boop, boop, boop. Here, here, okay. And now we should hopefully, so we're gonna pick this out

here, okay. And now we should hopefully, so we're gonna pick this out of the song model, the URL and the title. And these will be our required fields. And in fact, if we wanted to strengthen this just a little more, just in case we can surround this in required so that if they ever became unrequired in the model, we can make sure that they're still required here. Now we have our non-required fields, our our, our optional fields, right?

Now we have our non-required fields, our our, our optional fields, right? And we're gonna pick from the song model artist album notes rating, so that those types are still reflected between the original type definition and the form data that we're working with now. So we're almost there and let's just double check what we got going on here. So the URL string required, string required. This is now string or undefined album.

So the URL string required, string required. This is now string or undefined album. Undefined though it's undefined rating. Undefined, okay, almost there. There's a big difference here though. They're not only not required, but they're also nullable. All of them could also be null. So let's come back into types. And I have a little utility type that I have created much in the same way that there's a required and a partial.

And I have a little utility type that I have created much in the same way that there's a required and a partial. I have created a nullable utility type that we can use. So I've gone ahead and just pasted this in here so we don't have to watch me type this out. But basically it accepts the type and it says for each key in the type, the value is the type is the current type or null, right? So it just makes any value of an object nullable.

the current type or null, right? So it just makes any value of an object nullable. So then we can just wrap this nullable here and here and now, oh, I gotta import it types. Okay. And now, right, so now it can be string null or undefined, which is correct, which is it the equivalent of this. So now all of these should have null in them. Again, we're going down like major TypeScript path here. But you can opt into all of this.

Again, we're going down like major TypeScript path here. But you can opt into all of this. You could just keep it exactly as this. I just wanted to show you what a little bit next level looks like. The final one, you can always combine these with just traditional types. And so playlist is just something we made up so we could just move this right over here and now we're done.

so we could just move this right over here and now we're done. And so we can get rid of this original type. And I think, did I miss something here? Let's see. Argument of type URL require notable to type string argument of type URL string. Which one's wrong here? Mm-hmm. Favorite Boolean? So favorite. I think I missed something. Oh, it's supposed to be here. Favorite. Now we're happy. Okay, great. See, I just had a little tight script error.

Oh, it's supposed to be here. Favorite. Now we're happy. Okay, great. See, I just had a little tight script error. I figured out where the mismatch was and uh, we're back. And so this should be exactly the same. We still should get the auto complete here, but now if something changes in the song model, we now have access to it and it's automatically reflected in both of these types. Again, totally optional, but if you wanna reuse somewhat aggressively,

Again, totally optional, but if you wanna reuse somewhat aggressively, this is one way to do it.