Configure TypeScript

[00:00:00]
>> On that note, should we have the TypeScript talk? Let's have the TypeScript talk. I'm trying to think. Let's do with add banner. Anyone wanna know how to support TypeScript? Watch, And I gotta make this string. It's angry about this. We'll talk about how to deal with that in a second.

[00:00:28]
But generally speaking, as, Cool, all right, and so other than this being slightly angry about it doesn't know the type of the CSS file, there's some libraries that will just generate the types if you needed to. You could also just declare what the types are as well. But other than changing the file extension, that's it, we now support TypeScript.

[00:00:59]
I don't think I'm actually calling that at this point. But TypeScript is supported just by changing the file extension. No other configuration needed whatsoever, it's all kinda built in. If you have a TS config file in there, it will respect that, everything is good to go from the very beginning.

[00:01:14]
There's nothing that you need to do, TypeScript is just natively supported. We're not gonna be writing a lot of TypeScript today. But occasionally, we do an addBanner, how to configure something for TypeScript when we build a library, how to generate the types of it is based on TypeScript, so on and so forth.

[00:01:28]
But generally speaking, everything I've said so far about all these JavaScript files also applies as well for a given TypeScript file as well, right? All I have to do is add the type annotations. The important thing to note, though, is Vite is not gonna do your type checking for you, right?

[00:01:49]
It's gonna process those TypeScript files. It could be littered with a bunch of, depending on what your TypeScript settings are, things that TypeScript's angry about, it will still compile. The main reason for this is that that takes time, right? And a lot of the kind of fundamental idea here is that the faster everything is, the faster your feedback loop is.

[00:02:12]
So you hit Save, you see on page. The quicker that time is, right, the faster you can see that you messed something up, and the faster you can make the decision to get either your test passing or that div vertically centered, so on and so forth, right? And so it's not doing that type checking, it's simply compiling your JavaScript and rendering it, which is all it promised to do.

[00:02:35]
Generally speaking, if you use VS Code or something along those lines, VS Code is gonna yell at you with red squigglies and handle that for you and your editor in a separate process. So you're still building fast, you're still getting the type checking and development. And then the only thing, if you're using TypeScript, that I would say that you should do, you don't have to do it, is just to run the TypeScript compiler first before you build, and that will then blow up if your TypeScript won't compile.

[00:02:57]
Cuz Vite will just take your word for it and go for it, right? Cuz it's aiming to be fast and assuming that either your editor or the TypeScript compiler can go ahead and do the type checking for you separately. And this is happening in the process. Everything is fast cuz you're not compiling it all, doing the type check, and then rendering the page.

[00:03:17]
You're rendering the page, and then you can also either through your editor or through the build process, do the type- hecking. But out of the box, all you gotta do is change that file extensions, no pulling another loader. There was a time in my life where a certain build tool that might start with web and end with pack had three different TS loaders of various levels, support for various things, and I don't wanna live like that anymore, right?

[00:03:42]
And I don't wanna talk about the week of my life that I lost in, I think, 2018, 2019 to that cuz I don't have to live like that anymore. Because I just changed this and everything works, and whatever settings are in your TS config file are totally respected.

[00:03:54]
When we get to templates and stuff like that, too, you'll see that Vite provides a bunch of templates that'll have most of this stuff wired up for you as well, and you can kinda see a lot of stuff in there, too