Configure Project for TypeScript

[00:00:00]
>> Anjana Vakil: So now that we have this website, I'm going to reveal to you that this project, or these two projects, this full-stack app is not working as expected right now It has bugs So take a moment, poke around the UI, poke around the code if you want And so far these are all JavaScript projects There is no TypeScript around yet, except for all the stuff that many of these tools are doing under the hood, but what we're going to do is try to find and kill as many bugs as we can

[00:00:36]
So poke around the UI and just manually see if you notice any bugs And we also have some tests in the front-end A really comprehensive test suite No, but we do have a test command, so we can poke around here and try to, you know, look at stuff and see what you notice And if we want to in a new terminal, we're going to be opening a lot of terminals today

[00:01:01]
If we want to go back into the front-end, npm run test Huh, we have a test suite and it is not super happy So with this information, take a moment and see if you can get a sense of what some of the problems are that are going on here We're not going to try to fix them yet We're going to just know that they're there, and then we're going to use the power of TypeScript to destroy them

[00:01:37]
Suffice it to say we have some work to do, and perhaps you can guess that we're going to use TypeScript to do that work, and yet in my frontend directory, if I look at my source files, I got a .js I got, if I look in components, which is where the kind of meat and potatoes of the app is, I got a bunch of .js And in my frontend package.json, I don't got no TypeScript, so naked TypeScript

[00:02:19]
Like if you were on the bridge of the Enterprise and Jean-Luc Picard was telling you to make it so And the thing is, you now know exactly what you need to do In the frontend directory, we're just going to hang out in front-end for this exercise We're going to install TypeScript as a development dependency, set up tsconfig.json, and check that it's working by trying to run tsc or something like that so that you can confirm to yourself that TypeScript exists in this project now

[00:03:01]
Now I've got so many Node terminals right I have my backend API running in an Express app, I have my front-end UI app running in Vite, and I have my Vitest tests also running in the frontend directory More terminals OK, so back into front-end How do I install TypeScript in this project What do I type into my command line I believe it's npm i -D TypeScript

[00:03:39]
Bingo And the -D is shorthand for making this a developer dependency instead of a regular like runtime dependency So TypeScript is not going to ship with this really excellent code that we're definitely going to push to production Mm mm, no But it is going to be there for me, the developer, when I need it most So, bingo Added one package, fabulous

[00:04:10]
And now I can add a tsconfig.json to my repository alongside the package.json with another little command, yeah Tsc --init Beautiful So if I do, and right now I'm using just the global tsc because this --init is just kind of a one-time shot that's going to spit out my tsconfig.json Yay And so now I have my package.json shows my TypeScript, my tsconfig exists

[00:04:50]
And I can now do things like run tsc with no arguments And well, something happened We're going to fix that But it says no inputs were found in config file, which means it found the config file Huzzah OK, OK, let's return to the wide, weird, wonderful world of TypeScript config options and compiler options, which we started looking at earlier and we really just kind of scratched the surface of

[00:05:23]
Now, as we saw there's like all of this great documentation from Microsoft about all of the compiler options, all of the many, many, many, many, many options that I could use here But I don't know about y'all, but I find it a little bit overwhelming It's like, there's so many things to choose I have to understand what they all do in order to know how to correctly set up my tsconfig

[00:05:54]
That seems scary And sure enough, the handbook has my back There is a handy dandy guide all about choosing compiler options, because that's something that we need to write guides about because there's so many And so we're not going to go through all of this, but you can take a look at it and so what this guide helps you do is figure out, OK, what am I trying to use TypeScript for

[00:06:27]
What am I actually building What am I doing And based on that, here are some of the compiler options that you probably want So, y'all can dive into the wonderful compiler options guide in here We are just going to look at a little bit higher level of some ways that we can give ourselves a leg up in finding a good tsconfig.