Kickstart Your TypeScript Set Up 6 exercises

Installing pnpm for Package Management

The last thing we're going to install is pnpm, which is an alternative to the npm package manager. Although it's not required for all TypeScript repositories, it is needed for the one we're working with.

Understanding npm and package.json

If you've worked with JavaScript repositories, you'r

Loading explainer


00:00 The final thing we're going to install is pnpn. Now this is not necessarily needed for all TypeScript repositories, but it is needed for this one, for my one here. Now what this is, is an alternative to something called npm.

00:16 So npm, basically in every sort of JavaScript repository you will have run across this before, there is probably going to be a package.json. This represents essentially all of the packages that we need to install in order to run this code.

00:32 So inside here I have a special CLI for the total TypeScript repo, some helpers as well, some various things like crossfetch and nodemon, blah blah blah blah blah, and lots of things that I've decided should be in here. There's also a bunch of scripts inside here as well, like each individual ones for running each individual exercise,

00:50 and also a bunch of other dependencies too. So what I can do here is I can run npm install, which is a CLI, so I could say, I'm not going to run this, but I could say npm install, and this would get all of these packages and basically put them into node modules here.

01:07 Node modules, as you can see, is a big old folder with a bunch of different stuff in there, and all of these node modules are then used because they all contain things like actual TypeScript in there, so here we go, some TypeScript, some JavaScript in there,

01:21 and those then get used by my actual source code, which lives inside SRC. Now this is perfectly fine, we could use npm for this, but I've decided to use pnpm instead. Pnpm is an alternative that basically runs a little bit faster,

01:38 and also means that you end up with less disk space actually used on your setup, because if you think about it, with npm, you would actually end up with lots of duplicated stuff in your node modules if you had lots of repositories on your computer with basically the same contents.

01:55 Let's say they all installed the same version of tanstack react query. Well, that's a lot of duplicated code. What pnpm does is it actually hard links it up to a root in your system, so there's only one copy on your system, and then it automatically sort of fills in all the node modules from that one copy.

02:13 This means it runs faster, and it means it's kinder on your disk space. And so because a lot of these exercises have very similar contents in terms of node modules, I've chosen to use pnpm, even though it's a little bit more setup for you. I hope you don't mind. But you can install it on pnpm's website, and it should just work,

02:32 you should be able to get access to pnpm. You will know if it's working if you can say pnpm-v, and you get a version spat out at you. If you're having trouble with this, go to my Discord, and people will be able to help you get set up. But pnpm, I do tend to recommend it over npm, just if you're working on a production monorepo,

02:51 because it's a little bit faster, and it just helps make the developer feedback loop a little bit quicker too. But it's absolutely critical for this repo too.