Okay, so this whole time we've been talking about React because this particular app is written in React, but I didn't wanna leave the view folks out in the cold because we love you. Right? So I wanted to show you what the equivalent component would look like in view, converting that to TypeScript. So the first thing we did is we updated the TS config. I just grabbed this from the view starter kit from Laravel. Uh, the only thing I'll just note is

I just grabbed this from the view starter kit from Laravel. Uh, the only thing I'll just note is that we're now compiling view with a couple of extra view specific configs. You can just grab this from the view starter kit. It's a great starting point for your view application for TypeScript. So this is our edit view. The first thing we need to do is tell view that the script setup tag is going to be using TypeScript.

The first thing we need to do is tell view that the script setup tag is going to be using TypeScript. So you say Lang Ts and immediately you start getting read because things are undefined or implicit anys a, all the same things are going on here that are going on in React when we first started this conversion. So we can grab some things from the React component and just reuse them here so we can grab these same types. So we're gonna grab the edit props and the update form data,

and just reuse them here so we can grab these same types. So we're gonna grab the edit props and the update form data, and then we can just go ahead and import the missing stuff. Okay. So this is equivalent basically so far to the React. And now instead of doing the non-type script methodology of defining props, we are going to define it via the generic. We're always using generics. So these are now the edit props. Okay? So now props is props song,

So these are now the edit props. Okay? So now props is props song, and we get all of that beautiful auto completion. Nice. So now it knows about all this stuff. And just like react, we can use the generics here. So the update form data, right? So now we've got, uh, all of our proper typing on our form. Great. Easy enough. And then here, you don't need the whole typing that we had to do for React because the prevent

And then here, you don't need the whole typing that we had to do for React because the prevent is actually happening here. So you don't really need to tap into that if you don't want to. The, the argument that's being passed through here, the Echo can use the same exact type as this one. So the song added data, right? So we can just import that. Okay? And then we can also grab this one for the JSON stream because the APIs are exactly the same.

Okay? And then we can also grab this one for the JSON stream because the APIs are exactly the same. And now we should get the same results. Let's just see data. Yep. Songs perfect. And now this is a type safe view component, exactly in the same way that our React component is.