Installing & Running TypeScript¶

TypeScript compiles down to plain JavaScript, so you don’t need a special runtime or VM. All you need is Node.js and the TypeScript compiler (tsc). In this lesson, you’ll learn how to install TypeScript, compile your first .ts file, and configure a real project using tsconfig.json.

Installing TypeScript¶

TypeScript is distributed as an npm package. You can install it globally or locally.

Global installation (useful for CLI access)¶

npm install -g typescript

This gives you the tsc command everywhere on your system.

Local installation (recommended for real projects)¶

npm install --save-dev typescript

This ensures your project uses a consistent TypeScript version across all environments.

You can still run the compiler via:

npx tsc

tsc Basics¶

The TypeScript compiler (tsc) converts .ts files into .js files.

Compiling a single file¶

Create a file:

// hello.ts
const message: string = "Hello TypeScript"
console.log(message)

Compile it:

tsc hello.ts

This produces:

// hello.js
var message = "Hello TypeScript";
console.log(message);

Running the compiled JavaScript¶

node hello.js

Watching for changes¶

tsc hello.ts --watch

This re‑compiles automatically whenever the file changes.

Configuring a Project from Scratch¶

Real TypeScript projects use a configuration file called tsconfig.json. This file tells the compiler:

• which files to include
• which JavaScript version to output
• how strict the type system should be
• where to place compiled files

Step 1: Initialize a project¶

mkdir my-ts-project
cd my-ts-project
npm init -y

Step 2: Install TypeScript¶

npm install --save-dev typescript

Step 3: Create a tsconfig.json¶

npx tsc --init

This generates a fully commented configuration file.

Step 4: Create your source folder¶

mkdir src
echo "console.log('Hello from TS')" > src/index.ts

Step 5: Compile the project¶

npx tsc

By default, TypeScript compiles everything in the folder and outputs .js files next to .ts files.

You can customize this behavior in tsconfig.json.

Understanding tsconfig.json¶

The tsconfig.json file controls how TypeScript behaves. It’s the heart of every TS project.

Here are the most important fields for JavaScript developers transitioning to TypeScript.

1. compilerOptions¶

This section defines how TypeScript compiles your code.

target¶

Specifies the JavaScript version to output.

"target": "ES2020"

module¶

Controls the module system.

"module": "ESNext"

rootDir and outDir¶

Organize your source and output files.

"rootDir": "./src",
"outDir": "./dist"

This keeps your compiled JS separate from your TS source.

strict¶

Enables all strict type‑checking rules.

"strict": true

This is the recommended setting for serious projects.

esModuleInterop¶

Makes CommonJS and ES modules play nicely together.

"esModuleInterop": true

This allows:

import express from "express"

instead of:

import * as express from "express"

2. include and exclude¶

Control which files TypeScript should process.

"include": ["src"],
"exclude": ["node_modules"]

3. Example Minimal tsconfig.json¶

Here’s a clean, production‑ready config:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "rootDir": "./src",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src"]
}

Running TypeScript in Practice¶

Once your project is configured, you typically use:

Compile once¶

npx tsc

Compile in watch mode¶

npx tsc --watch

Run with a TS runtime (optional)¶

Tools like ts-node or tsx let you run TypeScript directly without compiling:

npx tsx src/index.ts

These are great for development, but production should always run compiled JavaScript.

Summary¶

In this lesson, you learned how to:

1. Install TypeScript¶

• globally or locally
• use tsc via npm scripts or npx

2. Compile TypeScript files¶

• single‑file compilation
• watch mode
• running compiled JS

3. Configure a real project¶

• initialize tsconfig.json
• understand key compiler options
• organize source and output directories

This foundation prepares you for the rest of the course, where you’ll start writing real TypeScript and understanding how the type system works.