All right, let's convert our first component to TypeScript. So the first thing we want to do is we wanna rename this to TSX. So now we're in TypeScript mode. Now it's gonna light up red in a couple of areas here, but the thing we're gonna focus on in this lesson is converting the inertia props. So right now, binding Element song implicitly has any type, we don't know what song is,

So right now, binding Element song implicitly has any type, we don't know what song is, we know we're destructuring an object here. And so we know that there's a property song, but we don't know anything about that property at all. So let's, let's fix that. Let's go into song controller and we'll see songs edit. And the song is just the song model. So let's pop into that. And we have a bunch of fillable properties here, so we can assume that those are probably coming back.

And we have a bunch of fillable properties here, so we can assume that those are probably coming back. So we have URL title artists, et cetera. If we can see that the favorite is being cast to a Boolean, and that the rating is being ta cast to an integer. So let's come back to our component and we will say that song is definitely a property because we're destructuring it, right? And that's coming back. And we're gonna pop all of these in here.

And that's coming back. And we're gonna pop all of these in here. And first up, we're just going to say that these are strings, right? So now we have URL title artists, they're all strings, but we know that rating is being cast to a number. And we know that favorite, if we come back here is being cast to a Boolean. So let's fix that Boolean. So now what did that get us? Well, before all of these were any,

So let's fix that Boolean. So now what did that get us? Well, before all of these were any, and now they're their proper types. So now if we have song dot, we get autocomplete, we get IDE intelligence around the properties of our component, which is pretty rad. So let's look around and make sure we didn't miss anything. Oh, we have song id, we forgot the id, but of course it's gonna come back with an id. ID is going to be a number. Great.

but of course it's gonna come back with an id. ID is going to be a number. Great. So now that should be happy. Perfect. So now if any of this changes, we get something red letting up in the ID that says, Hey, something's wrong. I don't know about this property, or, I don't think you're using this correctly based on its type, which is pretty cool. Now let's actually make this slightly more complex.

type, which is pretty cool. Now let's actually make this slightly more complex. So before we return here, we are going to actually load the songs tags. Okay, so now we're loading a relationship. Let's go into tag and let's see what it is. So we have a label and a value, and a song has many tags. Okay, so what does that look like? Now, if we wanted to use this on the front end,

Okay, so what does that look like? Now, if we wanted to use this on the front end, we would say tags, and then we would specify the object, which is label is a string, value is a string, and it is an array of them, right? So we're getting an array of those objects back. So now if we do song tags, nice auto complete, we get methods related to an array. It knows it's an array.

we get methods related to an array. It knows it's an array. And then if we said t, we get auto complete based on that. So your, your component just got a hundred times smarter just by adding some types to it. Pretty cool.