Hey, my name is Joe Tannenbaum and in this course we are going to be learning about practical TypeScript for the Laravel Dev. Now, this isn't going to be a deep dive into TypeScript, it's more going to be just the things you probably are going to run into when building a Laravel app that has a TypeScript front end. And I know, I know you hear TypeScript and you think, oh God, it's gonna look like this.

And I know, I know you hear TypeScript and you think, oh God, it's gonna look like this. You have these insane types that are really hard to comprehend. I, I know TypeScript pretty well. This is really hard to parse. It's okay. We're not writing this. This is package code. You're not gonna be writing anything like this. This is a, a form helper for the inertia package. We're gonna be writing application type script,

This is a, a form helper for the inertia package. We're gonna be writing application type script, which is usually way simpler and you're not really gonna be diving into anything nearly as complex as this. So let's dive in and start converting this vanilla JavaScript app to typescripts. Now we're gonna be working with an app called Liz N. It's a song sharing app that I made. Doesn't matter, we're not gonna

It's a song sharing app that I made. Doesn't matter, we're not gonna even boot this up in the browser. We're just going to be converting it to TypeScript so you can see what the process looks like. Let's get going. Okay, so what's the first thing we need to do to convert to this vanilla JS app to TypeScript? Well, the first thing we need to do is actually Intel install TypeScript. So let's do that. Do N-P-M-I-D type script.

to do is actually Intel install TypeScript. So let's do that. Do N-P-M-I-D type script. Great, that's done. Let's do NPX TSC dash dash in it. Okay. Created a new ts fg json, let's check it out. Let's close out this terminal. Okay, so we've got our Ts config json It is a lot. It's a, it's, it's a lot of things that are actually, uh, commented out. You don't actually need to know what all

uh, commented out. You don't actually need to know what all of these options mean and what they are. Um, it doesn't matter so much upfront. You may need to tweak them later, but you can figure that out as you go along. What I tend to do is grab a TS config from a trusted resource such as the Laravel React Starter Kit since this is a React app and I can plop it in because it's a Laravel app, it's React app,

a React app and I can plop it in because it's a Laravel app, it's React app, it's probably going to be correct. So let's actually just grab that and we can take a look there. So this is what that config looks like. Much simpler, no comments. You can just sort of read through it. Uh, some notable attributes of this ts config is, uh, we are aliasing the, uh, JS path to this at symbol.

Uh, some notable attributes of this ts config is, uh, we are aliasing the, uh, JS path to this at symbol. We want to compile JSX since this is a React app and we're including all of these resources when, uh, parsing with typescripts. Other than that, you can basically leave this alone. You'll know when you have to change something in the TS config, it'll bark at you. You can look it up, you can figure it out. But this is a good baseline to start with.

You can look it up, you can figure it out. But this is a good baseline to start with. Alright, we've installed TypeScript and we configured it. So what's the next step? Well, the next step is pulling up our app entry point. I think that's a good place to start. So let's go app jsx and we're just going to change the extension. We're gonna rename, we're gonna say app TSX and immediately it lights up red.

We're gonna rename, we're gonna say app TSX and immediately it lights up red. Now a lot of people think that adding typescripts to a project just gives you additional type safety and that is true, but what it really does is it makes your IDE more intelligent, right? You get better auto complete, you get smarter hovering, you get more intelligence around the client side of your app.

you get more intelligence around the client side of your app. And that's really why we're doing this. That's the end goal. In the beginning though, there are some annoying things that you just have to do to get it set up and going and this is one of 'em. So the cool thing is, yes, we have some errors here, but uh, we have solutions to the errors right here. So we can grab this and we can say NPMI save dev types

So we can grab this and we can say NPMI save dev types and now this should go away. Great. We have types there and now we are missing meta dot glob. Why are we missing that? So this comes from vet and by default vet uses the server types for the application, but we want the client types. This is one of those things you just have to either know or Google.

This is one of those things you just have to either know or Google. It's really easy to look up. You would just, you know, literally Google this and you would come up with the correct answer. And the correct answer is that you create a new file called Vet in VD Ts and you put this in it and this just says, Hey, for this package, use the client's types.

and this just says, Hey, for this package, use the client's types. That's it. And now it's happy. It knows a ton about your application in regard to import meta glob and we're good to go. We've converted the app entry point. So one thing I wanna mention is that this is a do d ts file. That's a declaration file. A D ts file means that only types can go in there.

That's a declaration file. A D ts file means that only types can go in there. In a normal TS file. You can add regular code, you can add types, you can add TypeScript, you can add anything you want in a do D Ts only declaration, file only types. And then these just get compiled away at the end. They don't end up in your final bundle. It's just type information for your application. Okay, let's keep moving.

It's just type information for your application. Okay, let's keep moving.