Step-by-step guide to set up Node.js with TypeScript and enable execution and debugging in VS Code.

Here’s a step-by-step guide to set up Node.js with TypeScript and enable execution and debugging in VS Code.

Step Action

1 Install Node.js & NPM

2 Install TypeScript globally

3 Create a new project (npm init -y)

4 Install typescript and @types/node

5 Generate tsconfig.json (npx tsc --init)

6 Write TypeScript code (src/index.ts)

7 Compile TypeScript (npx tsc)

8 Run JavaScript with Node.js (node dist/index.js)

9 Set up VS Code Debugging

10 Use ts-node for instant TypeScript execution

11 Use nodemon for automatic compilation

Step 1: Install Node.js and NPM

Download & Install Node.js

Download from Node.js Official Website

Install the LTS (Long-Term Support) version.

Verify installation:

node -v  # Check Node.js version

npm -v   # Check npm version

Step 2: Install TypeScript

Install TypeScript globally:

npm install -g typescript

Verify installation:

tsc -v  # Check TypeScript compiler version

Step 3: Set Up a New Node.js TypeScript Project

Create a new project folder:

mkdir my-typescript-app && cd my-typescript-app

Initialize a new package.json file:

npm init -y

This will generate a package.json file with default values.

Step 4: Install Required Dependencies

Install TypeScript locally for the project:

npm install --save-dev typescript

Install Node.js types for TypeScript:

npm install --save-dev @types/node

Step 5: Configure TypeScript (tsconfig.json)

Generate a tsconfig.json file:

npx tsc --init

Open tsconfig.json and modify the following settings:

json

{

  "compilerOptions": {

    "target": "ES6", 

    "module": "CommonJS",

    "outDir": "./dist", 

    "rootDir": "./src", 

    "strict": true

  }

}

This ensures:

TypeScript compiles into ES6 JavaScript.

Uses CommonJS module format (required for Node.js).

Stores compiled files in the dist/ folder.

Reads TypeScript files from src/ folder.

Step 6: Create and Compile a TypeScript File

Create a src/ directory and an entry file:

mkdir src && touch src/index.ts

Add some TypeScript code inside src/index.ts:

const message: string = "Hello, TypeScript with Node.js!";

console.log(message);

Compile TypeScript to JavaScript:

npx tsc

This generates dist/index.js.

Run the compiled JavaScript file using Node.js:

node dist/index.js

Output:

Hello, TypeScript with Node.js!

Step 7: Enable Debugging in VS Code

Open the project in VS Code:

code .

Create a VS Code Debug Configuration:

Open VS Code.

Go to Run → Add Configuration....

Select Node.js.

Modify .vscode/launch.json:

{

  "version": "0.2.0",

  "configurations": [

    {

      "type": "node",

      "request": "launch",

      "name": "Launch Program",

      "skipFiles": ["<node_internals>/**"],

      "program": "${workspaceFolder}/dist/index.js",

      "preLaunchTask": "tsc: build - tsconfig.json"

    }

  ]

}

This ensures TypeScript compiles before debugging.

Step 8: Debug TypeScript in VS Code

Set a breakpoint in src/index.ts by clicking in the left margin of VS Code.

Go to Run and Debug (Ctrl+Shift+D) → Select Launch Program → Click Start Debugging.

Execution will stop at the breakpoint, allowing you to inspect variables.

Step 9: Automate TypeScript Compilation with ts-node

Install ts-node to run TypeScript without manual compilation:

npm install -g ts-node

Run TypeScript directly:

npx ts-node src/index.ts

Output:

Hello, TypeScript with Node.js!

Step 10: Automate Compilation with Nodemon

Install nodemon to watch files and recompile automatically:

npm install --save-dev nodemon

Add a nodemon config script to package.json:

json

"scripts": {

  "start": "node dist/index.js",

  "dev": "nodemon --ext ts --exec ts-node src/index.ts"

}

Run the development server:

npm run dev

It will restart automatically when you modify a .ts file.