TypeScript Environment Setup

TypeScript tutorial

TypeScript Environment Setup

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

 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

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)

 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

 Create tsconfig.json

Run:

npx tsc --init

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

Important tsconfig.json Options

 Project Folder Structure

Recommended structure:

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

 Write Your First TypeScript Code

Create src/index.ts


 

Compile the Project

Compile all .ts files:

npx tsc

JavaScript output will be generated inside dist/.

Run the Output

node dist/index.js

Output:

Hello TypeScript User, Age: 25

Watch Mode (Auto Compile)

Automatically compile on file change:

npx tsc --watch

 Environment Setup Summary

StepTool
RuntimeNode.js
Package Managernpm
CompilerTypeScript (tsc)
EditorVS Code
Config Filetsconfig.json

You Are Ready!

Your TypeScript environment is now fully set up

You may also like...