Skip to content

Beginner Tutorial: Node.js + TypeScript + pnpm

From zero → running your first TypeScript program

This tutorial walks you through setting up a simple Node.js + TypeScript project using pnpm. It is intentionally beginner-friendly and avoids frameworks such as Next.js or Express until the basic setup is understood.


1. Check if Node.js is installed

Open PowerShell or Command Prompt and run:

node -v

You should see something like:

v22.x.x

Then check pnpm:

pnpm -v

You should see something like:

10.x.x

If both commands work, you're ready.


2. Create your project folder

Go somewhere where you keep your projects:

cd Desktop

Create a folder:

mkdir my-node-typescript-app

Enter the folder:

cd my-node-typescript-app

Your project now looks like:

Desktop/
└── my-node-typescript-app/

3. Initialize a pnpm project

Run:

pnpm init

This creates:

package.json

The package.json file contains information and configuration for your project.

Your project now looks like:

my-node-typescript-app/
└── package.json

4. Install TypeScript

Install TypeScript as a development dependency:

pnpm add -D typescript

Check that TypeScript was installed:

pnpm exec tsc -v

You should get something like:

Version 5.x.x

5. Create a TypeScript configuration

Run:

pnpm exec tsc --init

This creates:

tsconfig.json

Your project now looks like:

my-node-typescript-app/
├── package.json
└── tsconfig.json

6. Create your source folder and file

Create a src folder:

mkdir src

Open the project in VS Code:

code .

Inside VS Code, create:

src/index.ts

Your project should now look like:

my-node-typescript-app/
├── src/
│   └── index.ts
├── package.json
└── tsconfig.json

7. Write your first TypeScript program

Inside src/index.ts, write:

const name: string = "Alden";

console.log(`Hello, ${name}!`);

Save the file.


8. Configure TypeScript

Open tsconfig.json.

For a beginner-friendly Node.js project, you can use:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "rootDir": "./src",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src"]
}

What does this mean?

The important parts are:

  • rootDir: "./src" → your TypeScript source code is inside src.
  • outDir: "./dist" → compiled JavaScript goes into dist.
  • strict: true → TypeScript performs stricter type checking.
  • target: "ES2022" → compile to modern JavaScript.
  • module: "NodeNext" → use Node.js's modern module system.

9. Compile TypeScript

Run:

pnpm exec tsc

If everything is correct, TypeScript creates:

dist/index.js

Your project now looks like:

my-node-typescript-app/
├── src/
│   └── index.ts
├── dist/
│   └── index.js
├── package.json
└── tsconfig.json

TypeScript converted:

index.ts

into:

index.js

10. Run the JavaScript

Node.js runs the compiled JavaScript:

node dist/index.js

You should see:

Hello, Alden!

🎉 You just created and ran a Node.js + TypeScript application!


11. Add pnpm scripts

Instead of repeatedly typing:

pnpm exec tsc

and:

node dist/index.js

you can add scripts to package.json.

Your package.json can look like:

{
  "name": "my-node-typescript-app",
  "version": "1.0.0",
  "scripts": {
    "build": "tsc",
    "start": "node dist/index.js"
  },
  "devDependencies": {
    "typescript": "^5.0.0"
  }
}

Now you can compile your project with:

pnpm build

Then run it with:

pnpm start

Output:

Hello, Alden!

12. Add development mode with tsx

Normally, you don't want to manually compile your TypeScript every time you change your code.

For a better development experience, install tsx:

pnpm add -D tsx

Then update your package.json:

{
  "name": "my-node-typescript-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "tsx watch src/index.ts",
    "build": "tsc",
    "start": "node dist/index.js"
  },
  "devDependencies": {
    "tsx": "^4.0.0",
    "typescript": "^5.0.0"
  }
}

Now run:

pnpm dev

You should see:

Hello, Alden!

When you change:

const name: string = "Alden";

to:

const name: string = "Juan";

tsx automatically reruns your program.


Final Project Structure

After completing the tutorial, your project should look similar to:

my-node-typescript-app/

├── src/
│   └── index.ts

├── dist/
│   └── index.js

├── node_modules/

├── package.json
├── pnpm-lock.yaml
└── tsconfig.json

Commands to Remember

What you want Command


Initialize project pnpm init Install TypeScript pnpm add -D typescript Create tsconfig pnpm exec tsc --init Compile pnpm build Run compiled app pnpm start Development mode pnpm dev


The Workflow to Remember

pnpm init

pnpm add -D typescript

pnpm exec tsc --init

src/index.ts

pnpm dev

Important Concepts

pnpm

pnpm is your package manager.

It installs and manages project dependencies such as TypeScript and tsx.

TypeScript

TypeScript is a programming language built on JavaScript with static typing.

The TypeScript compiler (tsc) converts TypeScript into JavaScript.

Node.js

Node.js is the runtime that executes JavaScript outside of a web browser.

tsx

tsx is a development tool that lets you run TypeScript directly and automatically restart your program when files change.


Beginner Mental Model

Think of the tools this way:

You write:
TypeScript

TypeScript compiler (tsc)

JavaScript

Node.js

Your program runs

During development, tsx makes this process easier:

src/index.ts

    tsx

Program runs

You edit the file

tsx detects the change

Program runs again

What's Next?

Once you understand this setup, a good next project is:

Node.js + TypeScript + Express REST API

You can then learn:

  1. HTTP requests and responses
  2. Express
  3. REST APIs
  4. Routes
  5. Controllers
  6. Middleware
  7. Environment variables
  8. MySQL
  9. Prisma
  10. Authentication