TypeScript Setup and Installation

Setting up TypeScript takes only a few minutes. The entire process requires Node.js installed on the computer, a terminal (command prompt), and a code editor. This page covers each step clearly so the environment is ready for writing TypeScript code.

What to Install First

TypeScript runs through Node.js. Node.js includes a package manager called npm (Node Package Manager) that installs TypeScript globally on the system.

  Required Tools Setup Flow
  -------------------------
  [Install Node.js]
        |
        v
  [npm becomes available]
        |
        v
  [Install TypeScript via npm]
        |
        v
  [TypeScript Compiler (tsc) ready]
        |
        v
  [Create .ts files and compile them]

Step 1 — Install Node.js

Visit https://nodejs.org and download the LTS (Long Term Support) version. LTS versions are stable and recommended for most users. Run the installer and follow the on-screen steps.

After installation, open a terminal and verify Node.js installed correctly:

node --version
# Output: v20.x.x (or similar)

npm --version
# Output: 10.x.x (or similar)

Both commands must return version numbers. An error means Node.js did not install properly.

Step 2 — Install TypeScript

Use npm to install TypeScript globally. The -g flag means the TypeScript compiler becomes available from any folder on the system.

npm install -g typescript

After installation, verify TypeScript installed correctly:

tsc --version
# Output: Version 5.x.x (or similar)

tsc stands for TypeScript Compiler. This command compiles .ts files into .js files.

Step 3 — Install a Code Editor

Visual Studio Code (VS Code) works best with TypeScript because Microsoft built both tools. VS Code provides TypeScript error highlighting, auto-complete, and inline documentation out of the box.

Download VS Code from https://code.visualstudio.com and install it.

Step 4 — Create the First TypeScript File

Create a new folder for the project. Inside VS Code, open that folder and create a file named hello.ts. The .ts extension marks it as a TypeScript file.

// hello.ts
let courseName: string = "TypeScript";
let totalTopics: number = 27;
let isPublished: boolean = true;

console.log("Course: " + courseName);
console.log("Topics: " + totalTopics);
console.log("Published: " + isPublished);

Step 5 — Compile TypeScript to JavaScript

Open the terminal inside the project folder. Run the tsc command followed by the file name:

tsc hello.ts

TypeScript compiles the file and creates a new file called hello.js in the same folder.

  Project Folder
  │
  ├── hello.ts     ← TypeScript source file (you write this)
  └── hello.js     ← JavaScript output file (tsc creates this)

Run the compiled JavaScript file using Node.js:

node hello.js

# Output:
# Course: TypeScript
# Topics: 27
# Published: true

Step 6 — Watch Mode for Auto Compilation

Manually running tsc after every change is slow. The --watch flag tells TypeScript to monitor the file and recompile automatically whenever it detects a change.

tsc hello.ts --watch

The terminal shows this message and stays active:

[12:00:00] Starting compilation in watch mode...
[12:00:01] Found 0 errors. Watching for file changes.

Now every time the .ts file saves, TypeScript recompiles it instantly.

Initialize a TypeScript Project

For a full project (not just a single file), TypeScript uses a configuration file called tsconfig.json. Generate this file with:

tsc --init

This creates a tsconfig.json file with default settings. Once this file exists, running tsc alone (without a filename) compiles all .ts files in the project.

  TypeScript Project Structure
  │
  ├── tsconfig.json    ← TypeScript configuration
  ├── src/
  │   ├── index.ts     ← Main TypeScript file
  │   └── utils.ts     ← Helper TypeScript file
  └── dist/
      ├── index.js     ← Compiled output
      └── utils.js     ← Compiled output

Compile the Entire Project

With tsconfig.json in place, one command compiles everything:

tsc

Use watch mode for the whole project:

tsc --watch

Online TypeScript Playground

Writing and running TypeScript code is possible without any local installation. The TypeScript Playground at https://www.typescriptlang.org/play provides a browser-based editor. Write TypeScript on the left side and see the compiled JavaScript on the right side instantly. This tool works great for quick experiments and learning.

Quick Setup Summary