All right, let's talk about the use form hook and how to add type trip to that for inertia. So we have our use form hook for react, and right now it's inferring this data, this initial data from what's being passed through, which is totally fine. Now we've typed our inertia props already, so we know that these are going to be what they say they're going to be. So we can actually remove all of these pipes.

what they say they're going to be. So we can actually remove all of these pipes. We know that this is gonna be 100%. Okay, now, so we're all satisfied, we're all happy here. We know this is gonna be a Boolean. We know this is gonna be a string. We know this is gonna be a number, but this form should represent what the other side, what the PHP side is actually expecting in the form data, right?

what the PHP side is actually expecting in the form data, right? So right now we're just passing through, but we don't know what the put is actually expecting on the other side. So let's actually dive in there. Let's go to the song controller. Let's go to update. And we have the song request. So we're doing some validation here. Okay, so this is what it's expecting.

So we're doing some validation here. Okay, so this is what it's expecting. The URL required title required, these are not required, and in fact, they can be null. So let's actually pull this up side by side and compare these two things. And let's create a type around this form that ensures what this is expecting matches what we're sending through. So let's update this use form hook and actually specify the fields

So let's update this use form hook and actually specify the fields and the types that the update method is actually expecting on the other side. So this is where generics come in. We're going to make a generic and we're gonna go field by field here. So the first one up is URL. It's required and it has to be a string, okay? URL. And it has to be a string.

It's required and it has to be a string, okay? URL. And it has to be a string. And already TypeScript is like, I'm a little upset here because it's saying you are passing through this information, but I'm actually receiving a lot more than that. And there's a mismatch, right? And we want errors. When there's a mismatch, it's just because we're not done yet. So let's keep going. Title required also a string.

just because we're not done yet. So let's keep going. Title required also a string. Okay? And you'll notice that we have things like max 2 55. You could do that in TypeScript. I don't think it's actually that useful. That's really more performed validation On the other side, I don't think it's useful to enforce that in your types. Next up artist. Now artist is actually not required. And in fact, it's nullable or a string. So it can be a null or a string,

And in fact, it's nullable or a string. So it can be a null or a string, and it actually doesn't have to come through at all if it doesn't want to. So how do you specify that in an object? How do you specify an optional key? You do question Mark Colon. And now you say that is, it could be undefined. That's optional, right? So now it could be a string or it could be null.

That's optional, right? So now it could be a string or it could be null. Great, let's keep going. Album, same deal notes, same thing, right? So we have artist album notes, all optional fields, and it could be string or null rating. Could be an integer or null. It's also optional. So let's do rating number or null. And then we have favorite, which is also optional.

So let's do rating number or null. And then we have favorite, which is also optional. It could be null or Boolean. So favorite. And it could be Boolean or null. Okay, so now we should be happy. Yeah, so now we should be happy. So now if we remove this, this is okay, this is an optional field, totally fine. But if we remove this a non-optional field, suddenly you get a nice little error that says, Hey,

But if we remove this a non-optional field, suddenly you get a nice little error that says, Hey, property URL is missing. And that's the kind of stuff that we wanna see. That's what makes our IDE more intelligent about the code that we're writing with very little overhead. This is so easy to do. Now, what if we had a more complex rule in here, just slightly more complex. So like what if we had something like playlist, right?

just slightly more complex. So like what if we had something like playlist, right? And so this is a required field, and we're gonna say these are the only values that are allowed. We can say chill or hype. Okay? These are the two values that are allowed. So now over here we can specify the playlist key. It's not optional. So we're just gonna do a regular colon and we're gonna say the values can be chill

It's not optional. So we're just gonna do a regular colon and we're gonna say the values can be chill or hype, right? So now we can see, okay, playlist is missing. It's gonna, it's gonna be upset about this, right? Property playlist is missing in type. So let's actually just add it manually for now 'cause we just made this up. So we get playlists and nice auto complete there. And guess where else we get auto complete? These values?

So we get playlists and nice auto complete there. And guess where else we get auto complete? These values? Chill, hype. Just a dropdown for us. Thanks, TypeScript. That's pretty cool. And so now form is satisfied. And if we enter anything else, right? So if we enter something that's not valid, this lights up and says, Hey, this isn't valid. These are not valid values for playlists. We like to see red when the expectation does not meet the reality.

We like to see red when the expectation does not meet the reality.