TypeScriptUnderstand the concepts. Build real technical depth.

Module 1 – TypeScript Fundamentals, Tooling, and tsconfig

1.1 Module Overview

TypeScript is a strongly typed superset of JavaScript developed by Microsoft. It adds optional static types, interfaces, generics, enums, and advanced type-level capabilities to JavaScript, compiling down to clean, idiomatic JavaScript that executes anywhere JavaScript runs.

By the end of this module, you should be able to:

• Explain what TypeScript is and how it differs from JavaScript.
• Understand the compilation pipeline and type erasure.
• Initialize, configure, and compile a project with tsconfig.json.
• Configure strict compiler flags (strict: true, noImplicitAny, strictNullChecks).

1.2 The TypeScript Mental Model

TypeScript code does not run directly in browsers or standard Node.js runtimes. It is type-checked and compiled to JavaScript:

TypeScript code (.ts / .tsx)
        ↓
Type checking during development & build (tsc)
        ↓
Type Erasure (types, interfaces, and annotations are completely removed)
        ↓
Plain JavaScript code (.js)
        ↓
Runs in Browser or Node.js / Bun / Deno

Key Insight: TypeScript types exist purely at compile time. They add zero runtime overhead and do not perform runtime data validation by themselves.

1.3 First TypeScript Program

const platform: string = "CodeStudio";
const students: number = 12000;
const isLive: boolean = true;

console.log(platform, students, isLive);

1.4 Installation and Setup

# Initialize npm project
npm init -y

# Install TypeScript as a development dependency
npm install --save-dev typescript

# Generate initial tsconfig.json
npx tsc --init

# Compile project
npx tsc

# Compile with watch mode
npx tsc --watch

1.5 Essential tsconfig.json Configuration

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "dist",
    "rootDir": "src"
  },
  "include": ["src"]
}

Core Compiler Options Explained

1.6 Practice Exercises

1. Initialize a new TypeScript project with npx tsc --init and enable strict: true.
2. Inspect the emitted JavaScript output of a TypeScript file and verify type erasure.
3. Observe how noImplicitAny: true prevents untyped function arguments.
4. Set up an src/ and dist/ compilation pipeline with watch mode.

1.7 Module Recap

In this module, you learned:

• TypeScript adds development-time static typing to JavaScript.
• Types are erased during compilation, adding zero runtime performance overhead.
• How to set up and manage modern compiler options inside tsconfig.json.