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 -vYou should see something like:
v22.x.xThen check pnpm:
pnpm -vYou should see something like:
10.x.xIf both commands work, you're ready.
2. Create your project folder
Go somewhere where you keep your projects:
cd DesktopCreate a folder:
mkdir my-node-typescript-appEnter the folder:
cd my-node-typescript-appYour project now looks like:
Desktop/
└── my-node-typescript-app/3. Initialize a pnpm project
Run:
pnpm initThis creates:
package.jsonThe package.json file contains information and configuration for your project.
Your project now looks like:
my-node-typescript-app/
└── package.json4. Install TypeScript
Install TypeScript as a development dependency:
pnpm add -D typescriptCheck that TypeScript was installed:
pnpm exec tsc -vYou should get something like:
Version 5.x.x5. Create a TypeScript configuration
Run:
pnpm exec tsc --initThis creates:
tsconfig.jsonYour project now looks like:
my-node-typescript-app/
├── package.json
└── tsconfig.json6. Create your source folder and file
Create a src folder:
mkdir srcOpen the project in VS Code:
code .Inside VS Code, create:
src/index.tsYour project should now look like:
my-node-typescript-app/
├── src/
│ └── index.ts
├── package.json
└── tsconfig.json7. 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 insidesrc.outDir: "./dist"→ compiled JavaScript goes intodist.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 tscIf everything is correct, TypeScript creates:
dist/index.jsYour project now looks like:
my-node-typescript-app/
├── src/
│ └── index.ts
├── dist/
│ └── index.js
├── package.json
└── tsconfig.jsonTypeScript converted:
index.tsinto:
index.js10. Run the JavaScript
Node.js runs the compiled JavaScript:
node dist/index.jsYou should see:
Hello, Alden!🎉 You just created and ran a Node.js + TypeScript application!
11. Add pnpm scripts
Instead of repeatedly typing:
pnpm exec tscand:
node dist/index.jsyou 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 buildThen run it with:
pnpm startOutput:
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 tsxThen 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 devYou 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.jsonCommands 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 devImportant 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 runsDuring development, tsx makes this process easier:
src/index.ts
↓
tsx
↓
Program runs
↓
You edit the file
↓
tsx detects the change
↓
Program runs againWhat's Next?
Once you understand this setup, a good next project is:
Node.js + TypeScript + Express REST API
You can then learn:
- HTTP requests and responses
- Express
- REST APIs
- Routes
- Controllers
- Middleware
- Environment variables
- MySQL
- Prisma
- Authentication