Server TypeScript Project Exercise

[00:00:00]
>> Anjana Vakil: So now, back to the backend, but make it TypeScript We're going to TypeScript-ify our backend project as well And at this point, we've worked through this flow a few times, so we're going to install TypeScript, we're going to create a tsconfig, we're going to extend it from some bases that are appropriate for our backend app

[00:00:28]
Node, hint hint We're going to start renaming some stuff and run tsc and see what happens Okay, let's take a moment to forget about our frontend directory We can still leave it running if we want to, although at this point, if we're just working on the backend API, it doesn't care what frontend clients are talking to it, so you can close it if your computer's hurting

[00:01:02]
And we're going to run through this workflow of setting up a TypeScript project or transforming a JavaScript project into a TypeScript project, and we're going to see what we need to do to make this backend have better types I am actually going to close some of these processes just for funsies Oh, so many users

[00:01:38]
All right, in my Event Me repository So I've gone back up to the root I'm going to close my frontend here, right here Go into my backend directory, and we can start taking a look at this project, and I'm just going to close editors here And let's take a look at package.json Let's take a look at our source We've got some JavaScript, we've got a server file here, and we have Express and a whole bunch of other dependencies that we're using here to run a server

[00:02:18]
This is a pretty standard Express server if you've worked with Node Express Cool If not, don't worry about it Suffice it to say we're dropped into this like, welcome, it's your first day on the job at eventme.com, Inc We've got some dependencies that all have to do with kind of plugins for handling web requests and blah blah

[00:02:40]
And then we've also got like a little SQLite database where our really amazing events data is being stored We have installed all of this earlier and that's how we got the dev server to run and now we need to install TypeScript Cd into backend Okay, now we're going to run npm i -D TypeScript I added a package, got it in my dev dependencies

[00:03:10]
Coolsies What's the next thing I need to do Tsc init Aha, get that tsconfig.json, girl Okay, we're going to tsc --init Boom, created a new tsconfig.json Oh man, look at all these options, so many commented out And here, ooh, what's that Oh, interesting Oh, maybe a spoiler, maybe a hint about what we might need to do if we're working in a Node project, perhaps

[00:03:45]
But let's, again, not try to reinvent the wheel Let's go back to our tsconfig bases and look at what we're working with here So there's a whole bunch of nodes That's a lot Now, depending on if you know exactly what environment this is going to be running in, maybe you want to be very specific about your value

[00:04:14]
I think maybe a good choice for us is the long-term support version, which I believe right now is currently—let's see, published two months ago and right now it's equivalent to Node 22 But this is something where if we wanted to not have to update this every time a new version comes out, like maybe we use this one

[00:04:40]
And so let's take a look at what it's going to do And it's going to do some things that we can look up in the config docs And why don't we try using that and extending it, so npm i and it's still a dev dependency, so -D @tsconfig/ Was it node-lts Node-lts, yes Added a package No, that's not my package.json There it is

[00:05:24]
Look at that And so now in my tsconfig, we can at the top here write our extends and then type out the whole @tsconfig/node-lts/tsconfig.json Okay, oops, missing a comma Okay, and now if we run tsc Well, let's see what happens Nothing We run tsc --show-config Now we get some information about what's happening here, show config, and again we're getting when we run tsc, no inputs

[00:06:19]
We need to rename some stuff We're starting to learn the drill here, so I'm just going to go through and start renaming file extensions and see what happens And sure enough, now, if I run tsc, errors And if I run show config, now I see it at least has one file coming in here, and I can see all of my configuration options here

[00:06:53]
Okay, now let's see what's going on I just changed server.ts and you'll notice that we got a whole bunch of stuff because we did not have the noEmit flag set, so maybe we want to do that We could do, we could also do something like not emit declaration files, et cetera, blah blah We can just say noEmit is true and clean up these many files

[00:07:42]
And now, let's see if we're going to get—okay, not so much output because we told it not to output things, but we still have plenty of errors Thanks, TypeScript Oh boy All of these imports are squiggling, basically And there's a whole bunch of stuff that's like, I don't know what process is Do you need to install type definitions for Node

[00:08:17]
Oh gee, thanks, yeah, I do, TypeScript compiler So this was that thing that we got a little bit of a hint at from our default tsconfig So what this is telling us, hey, you probably, if you're using Node.js, you probably want to do something like install the @types/node library, which similar to how Vite client came with a bunch of extra types, there is a set of type declarations for a non-TypeScript thing, which is Node running JavaScript

[00:09:04]
Yet we need those types So if I do npm i -D @types/node, just 'cause I'm listening to the comments that somebody at Microsoft wrote in the generator for the tsconfig, I see that it added some packages Let's look at package.json And it added this types Node to our dev dependencies That's cool And so now if we go back here and we run tsc, oh, I forgot something

[00:09:45]
There was some more instructions from our helpful comments And it's not just that I need to install the types, I also need to, like we did before, point TypeScript to them in our types array And so now, and it's helpfully telling me what that ought to look like, I can pass in Node to the types that I want the compiler to know about and think about

[00:10:19]
And hopefully now, we've at least got a couple of fewer errors, down to seven And for example, this process one, that is a Node-specific thing And if you haven't worked with Node before and this looks totally weird to you, no problem Frontend Masters has your back There's plenty of Node stuff, but suffice it to say, just like how when we're running JavaScript in the browser, we have stuff like document and console and window and whatever

[00:10:49]
When we're running Node on the server-side, we have stuff like process And so TypeScript didn't know about that until we pointed it in the right direction And in this case we had to install another package which came with a bunch of declarations for all of the things that go along with a typical Node environment.