Up until this point, we have been writing PHP and then writing types for our TypeScript. But there feels like there's a bit of a disconnect there, right? Wouldn't it be great if we could keep those two things in sync automatically? Well, we can. There's a great package from our friends at Spotsy called TypeScript Transformer, and we're gonna use this package to show you how

TypeScript Transformer, and we're gonna use this package to show you how to keep your PHP side in sync with your TypeScript side. So as you see in the package, this package allows you to convert PHP classes to TypeScript already. Love it. You just have to annotate your PHP classes with TypeScript and then it will pick up on it and convert something like this into something like this. Great. Let's install it. We have this, but actually there's

Great. Let's install it. We have this, but actually there's a Laravel specific package. So let's dive in here and we'll grab this install. Great. That's installed. We are going to publish the config. Okay, we've got TypeScript transformer. Okay, let's see. So auto discover types in the app path. That seems reasonable. We've got some collectors here that will search for classes

That seems reasonable. We've got some collectors here that will search for classes and autodiscovery types. Okay, that's fine. Transformers, take PHP classes, for example. Enums is an input and output, a TypeScript representation of the PHP class. Beautiful. Love that you have. Types that should always be replacing or, okay, default type.

Types that should always be replacing or, okay, default type. Yep, we we have carbon type replacement. All right outta the box. Love that. This is our output file. This is where the types are going to be generated to generated that D ts. And remember that D ts means it's a declaration file, meaning only types in there, no executable code, just types. We've got our type definition writer formatter transform. Okay. Okay. All of this is great. Cool.

We've got our type definition writer formatter transform. Okay. Okay. All of this is great. Cool. So we've got our config. I happen to know that this package works very well with the Spotsy Laravel data package, which is a package to easily create data transfer objects in your Laravel application. Let's check it out. So we're going to grab this composer require, we are going to composer require, okay?

to grab this composer require, we are going to composer require, okay? Let's create our very first DTO, which will prepare us to transform that DT O2 TypeScript automatically. So in our app directory, we're going to create a new file called Data song Do forward slash song data. Okay? And we'll do namespace app data and the class will be song data and it will extend the data

app data and the class will be song data and it will extend the data base class from spotsy. And now what we're gonna do is just add all of the song model properties as constructor properties to this class. So we're gonna say public function construct, and we are going to grab the song model, okay? We're gonna grab all of this and put it in here. One, okay?

We're gonna grab all of this and put it in here. One, okay? We'll say public, we'll default everything to a string here. Okay? That's a good baseline. We know that this is an inch, we know that this is a bull, and we also know that we have an id. Okay? That's a good place to get started. So you would then construct this DTO with all of these properties, uh, from the song model. So lemme show you what that looks like in

of these properties, uh, from the song model. So lemme show you what that looks like in our song controller. Instead of returning this in our edit, we would then say, song data from song. And this package is smart enough to say, okay, I'm, I'm receiving a model. And the from method will create a new song data, DTO, from that and automatically convert it to an array on the other side.

that and automatically convert it to an array on the other side. So this is equivalent to what we were, what we were receiving before, but now it's wrapped in A DTO. So the benefit is that this DTO can actually be transformed to TypeScript for us automatically. So if we use the attribute type script from the TypeScript transformer package, it should pick up that we want

from the TypeScript transformer package, it should pick up that we want to transform this to TypeScript. Let's see if this works. We'll run PHP Artisan type script. I believe it's transform. Okay, we have an error here. Spotsy. Enum Enum does not exist. Okay? So I'm familiar with this error in the config. By default, we have some enum transformers.

So I'm familiar with this error in the config. By default, we have some enum transformers. We are not gonna use those right now. If you're using Enum transformers, you need that package. We don't really need that right now. So we're just gonna comment those transformers out. Let's try it again. And beautiful. So it looks like we have a TypeScript entity that was generated for us. Let's see, I believe it was generated. D ts.

that was generated for us. Let's see, I believe it was generated. D ts. Okay. Yeah. So we have a namespace app data, so it sort of reflects what's going on behind the scenes. And then we have song data and there's a TypeScript definition for us here. Great. That was easy. I love that. Okay, how do we use it in our component? Let's go back to edit that TS tsx

Okay, how do we use it in our component? Let's go back to edit that TS tsx and instead of edit prop, so this we'll actually just say app do. Now, interestingly, I'm noticing app dot, okay? It's not finding this type. And I think I know why TS config. This is what we're including. And I bet you that it is outside. Yes, we do not know about this.

And I bet you that it is outside. Yes, we do not know about this. So let's just add this for now. We can always change this path and the config, but for now, let's stick with the defaults. So now we're gonna add resources types in here to look for DT DS files. So now, yeah, now we got it. Data, song data, okay. And look, there it is. It's generated from our PHP. That's pretty cool.

Data, song data, okay. And look, there it is. It's generated from our PHP. That's pretty cool. So this should all still be correct and the same. So now let's, let's try something real quick. Let's close everything out. Let's go back to song data and let's just change something. Let's say favorites instead of favorites. And let's transform and see if it gets reflected. Ah, look at that. That's amazing. Okay, great. So this is working,

Ah, look at that. That's amazing. Okay, great. So this is working, but obviously we don't want to manually run this every time as we're developing, we want this to be running. So we want to integrate this into the VT process. Let's do that now for simple commands like this. So we're just running the command as we're developing. I like this. This is VT plugin run. So we're gonna grab this NPMI. Great. Gonna add this in. Beautiful.

So we're gonna grab this NPMI. Great. Gonna add this in. Beautiful. And let's just update our VT config, okay? But grab that, we'll grab this and look, he has got TypeScript transform right there for us. Ready to go. Beautiful. So PHP Artisan type, that's the command we wanna run. We actually, that's the correct pattern as well.

So PHP Artisan type, that's the command we wanna run. We actually, that's the correct pattern as well. We'll leave in Enos for now. Doesn't hurt. So now if we do NPM run dev and get it, spin up our dev process. Let's see. Okay, let's see if this works. So if you pull up generated here and let's go side by side and let's just change something. Favorites just changed. Ratings just changed. Oh yeah, this is the dream.

Favorites just changed. Ratings just changed. Oh yeah, this is the dream. So not everything stays in sync automatically. That's what you want. Let's do one more thing here. Let's add the, uh, the timestamps in. So we have carbon, uh, published at, and created at. Look at that. Beautiful. I love it. You can dive really deep with this package. I know that there's a lot of options on the DTO package.

You can dive really deep with this package. I know that there's a lot of options on the DTO package. There's a lot of options on the TypeScript Transformer package. It, it's really valuable. This is a really good package. So if you want to get really specific and granular about exactly what is being sent to the front end and how exactly it is being transformed, the Laravel data package, plus the TypeScript Transformer package from the

the Laravel data package, plus the TypeScript Transformer package from the spotsy is unbeatable. It's great. You should give it a whirl.