TypeScript Environment Setup

TypeScript tutorial

⚙️ TypeScript Environment Setup

This guide will help you a complete TypeScript Environment Setup step by step.

1️⃣ Install Required Tools

Make sure these are installed:

  • Node.js (includes npm)

  • TypeScript

  • Code Editor (recommended: Visual Studio Code)

👉 You already installed TypeScript in the previous step.

Check:

node -v
npm -v
tsc -v

2️⃣ Install Visual Studio Code (VS Code)

Download and install VS Code.

Recommended VS Code Extensions

  • ESLint

  • Prettier – Code Formatter

  • JavaScript and TypeScript Nightly (optional)

(VS Code has built-in TypeScript support)

3️⃣ Create a TypeScript Project

Create a new folder and open it in VS Code.

mkdir typescript-project
cd typescript-project

Initialize npm:

npm init -y

Install TypeScript locally:

npm install --save-dev typescript

4️⃣ Create tsconfig.json

Run:

npx tsc --init

This creates tsconfig.json, which controls how TypeScript behaves.

Important tsconfig.json Options

{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"rootDir": "./src",
"outDir": "./dist",
"strict": true
}
}

5️⃣ Project Folder Structure

Recommended structure:

typescript-project/
│
├── src/
│ └── index.ts
│
├── dist/
│ └── index.js
│
├── tsconfig.json
├── package.json
└── node_modules/

6️⃣ Write Your First TypeScript Code

Create src/index.ts

let userName: string = "TypeScript User";
let age: number = 25;console.log(Hello ${userName}, Age: ${age});

7️⃣ Compile the Project

Compile all .ts files:

npx tsc

JavaScript output will be generated inside dist/.

8️⃣ Run the Output

node dist/index.js

Output:

Hello TypeScript User, Age: 25

9️⃣ Watch Mode (Auto Compile)

Automatically compile on file change:

npx tsc --watch

🔑 Environment Setup Summary

Step Tool
Runtime Node.js
Package Manager npm
Compiler TypeScript (tsc)
Editor VS Code
Config File tsconfig.json

✅ You Are Ready!

Your TypeScript environment is now fully set up 🎉

You may also like...