Build a TypeScript Project From Scratch Tutorial (19 exercises)

Set up TypeScript and Testing Boilerplate

In this lesson, you’ll learn how to initialize a new TypeScript project and set up testing with Vitest.


The following resources provide more information for this lesson:


[0:00] [0: 00] CD into this streak-counter folder and then run pnpm in it. This will create a basic package JSON. Now let's add our dependencies. Run pnpm add -D vite vitest and typescript. TypeScript is self-explanatory. This is a TypeScript tutorial.
[0:18] [0: 18] Vite powers vitest, our test runner, which if you're not familiar, it is a blazing fast unit test framework, that will be using instead of Jest because it has TypeScript support out of the box, and it just has a friendlier developer experience. Next, we'll initialize our TypeScript config with pnpm tsc --init. tsc comes with TypeScript when you install it. That's how we have access to that.

[0:47] [0: 47] Just creates tsconfig.json, it's heavily commented. If you are curious what all the options to you, you can go through and look. It can get overwhelming though. For now, we're not going to be diving into that. Now we're going to open up the Explorer on the left. Inside of here, we're going to create a new file under __tests __/index.test.ts.

[1:11] [1: 12] When we do this, VS code will automatically create the directory if it does exist. Inside of here, we're going to add a very, very basic test. This is just a sanity check to make sure that vite and vitest and TypeScript, everybody is playing happily together. Now before we can run our tests, we're going to open package.json and go to the test in scripts and add vitest like so.

[1:35] [1: 35] Then we'll run pnpm test and then we'll run vitest in watch mode and it should pick up our test and we'll see that it's passing. Awesome. Just like that, we are ready to go.