Setup a TypeScript Project

[00:00:00]
>> Anjana Vakil: Enter tsconfig.json Now, since some of us have worked with TypeScript before, have folks seen these tsconfig.json files floating around codebases I'm seeing a lot of nods I'm imagining virtual nods, and if you've looked at tsconfig.json, which we're going to do in a moment, you might recognize some of the flags that we were just talking about

[00:00:25]
So tsconfig.json is essentially a way for us to specify all of these different options without having to write out the command line with all the flags every time So, shall we continue compiling In our next exercise, we are going to be stretching our tsc legs a bit, getting a little momentum going with using npx tsc And so similar to the other ones, we've got this 3-compiler-exercise directory where we have our starting code

[00:01:11]
So I am going to move into that directory as I hope you will do as well And if we look at what's going on here inside of our exercise directory, it's got something that starts to look a little bit more like the JavaScript code we're probably more used to working with It's an actual package There's a package.json We have one test, so I guess that's better than most of the JavaScript that I write out there, but, and we have a file called compile.ts

[00:01:56]
Any guesses what I'm going to make you do to that file Yeah, you know it Okay So now, first of all, since we have an actual package here, we probably have some information in the package.json Let's take a look at it Super great module package here Indeed we have a whopping one dependency, direct dependency, which is a library called Vitest If you haven't worked with it, don't worry about it too much

[00:02:30]
It's similar to a lot of testing libraries, frameworks, and that is what we're using for convenience in this simple test.js We are importing some utilities from Vitest And this is a .js file, so we're not in TypeScript world here, and we are importing the code that we want to test and we are now no longer just comparing strings and outputting emoji success failure

[00:03:01]
We are actually going to have a test suite where we say, okay, I have these create functions, and when I create a user, it should happen like this, and the user should have the correct username and the event should have the correct date, and so on and so forth So, suffice it to say, again, a very complex JavaScript package, but we have a dependency and we have the usage of that dependency, and so we need to install what we need to run this code

[00:03:35]
So we can do that in our directory with npm i or your package manager of choice So I'm inside this 3-compiler-exercise directory, npm i Okay, it's going to install packages, it might take a little longer, a little less if you haven't already installed this, for example And now that we have that running, we have a test script in our package.json which we can execute with npm run test

[00:04:10]
And we may have seen briefly there, okay, it's running this command Vitest, which comes from our dependency, and that is going to automatically run whatever files it finds that have blah.test.js This is not about testing, but suffice it to say it's running and it's passing, which is interesting So our tests are passing, our dependencies were installed, et cetera, et cetera

[00:04:56]
But now, it's time to actually make this a TypeScript project So, TypeScript is something that we installed globally before so that we could use it at the command line, but we also want to let the package know if we are intending for this to be a project that uses TypeScript And the thing is, remember how we said that TypeScript does not actually run

[00:05:22]
JavaScript runs So this is not going to be a regular dependency of our project, like a library that I'm using to pad strings or something like that, but rather a development dependency that we're only going to use as we write the code and as we work on the project and isn't actually going to be needed or possible to use in our end product, as it were

[00:05:53]
So we're going to install TypeScript in this package with the command npm i -D, which is the same as doing npm install --save-dev typescript So, even though you've already got TypeScript globally, we're going to make it happen in this repository, so quitting my test runner Npm i -D typescript And sure enough, it says it added one package Let's double check

[00:06:26]
And indeed, now, because the tests are also a development dependency alongside Vitest, we now have a beautiful, wonderful TypeScript dependency as a development dependency in our JavaScript project Okay, step one Well, I guess it was step two, but so now, it's often the case that you'll see those three little letters tsc in some of the scripts in a package.json, and we don't have a script to run the compiler yet, so why don't we add one

[00:07:06]
And you can call it whatever you want, you can call it type-check, you could call it tsc if you want, but I called it compile And I'm just going to drop that into the scripts object here so that I can now run npm run compile from within my project directory And oh boy, look at that help message It's so helpful It didn't do anything It just printed a bunch of information

[00:07:57]
And that's because the compiler doesn't know what we want it to do yet So it's like, oh, you just want me to show you that I'm alive Here you go Here's all the stuff I know how to do Here's my message So what we need to do is tell tsc when we just run it with no arguments what we want it to do, and we can do that with a tsconfig.json file Now, an easy way to get a tsconfig.json file, I mean, you could write it by hand if you wanted to, but an easy way to generate one is by passing this flag --init

[00:08:41]
And so if we run, and we can run this globally because this is just kind of a one-shot, one-time thing, we're not actually, this isn't a command we're going to run continuously in our development, we're just going to run it one time to set up our project So I'm going to use my global tsc --init inside of the directory with the package.json and everything where I want TypeScript to know what to do

[00:09:10]
And it says, I created a new tsconfig.json You can learn more at this helpful link Oh gee, thanks tsc And sure enough, that links to an even scarier list of even more options Oh my goodness Understanding what all of these does is not only out of scope for this course, but out of scope for my brain, and most of our brains, I think So that's why we have helpful reference files on the documentation site so that if you're ever like, what does that do, you can look it up here

[00:09:49]
Now, how about we check out our shiny new tsconfig.json, which again, even in the file it says, hey, you know, when you forget all of these things like tomorrow, what they mean and what they do, go to this @tsconfig/ docs to understand So let's take a moment just real quick and read through on our own and just try to, we can refer to the docs, but just take a glance through this and just start to warm up to our new friend tsconfig.json.