Introduction to TypeScript

TypeScript is a superset of JavaScript developed by Microsoft that adds static type checking to the language. It compiles down to plain JavaScript that runs anywhere JavaScript runs — browsers, Node.js, Deno, and more.

Analogy: JavaScript is like writing a shopping list on a napkin — flexible but easy to make mistakes. TypeScript is like using a structured shopping app — it tells you when you’ve typed “mil” instead of “milk” before you go to the store.

JavaScript was never designed for large-scale applications. As web apps grew from simple scripts to complex enterprise systems (Slack, VS Code, Figma), JavaScript’s lack of a type system became a major pain point:

1. Runtime errors — Most bugs appear only at runtime
2. Poor tooling — No autocomplete, refactoring, or go-to-definition
3. Documentation gaps — Functions don’t declare what they expect or return
4. Team scalability — Large codebases become unmaintainable

TypeScript solves these by catching errors at compile time, before your code ever runs.

// JavaScript — no type checking
function greet(name) {
  return "Hello, " + name.toUpperCase();
}
greet(42); // Runtime Error: name.toUpperCase is not a function

// TypeScript — catches the bug at compile time
function greet(name: string): string {
  return "Hello, " + name.toUpperCase();
}
greet(42); // ❌ Error: Argument of type 'number' is not assignable to parameter of type 'string'

flowchart TB
    TS[Your TypeScript Code<br/>.ts file] --> TSC[TypeScript Compiler<br/>tsc]
    TSC --> Check{Type Checking<br/>Passes?}
    Check -->|No ❌| Errors[Errors Reported<br/>Fix & Re-compile]
    Check -->|Yes ✅| Transpile[Transpile to JavaScript]
    Transpile --> JS[JavaScript Output<br/>.js file]
    JS --> Runtime[Execute in<br/>Browser / Node.js]

    style TS fill:#7c3aed,color:#fff
    style TSC fill:#3b82f6,color:#fff
    style Check fill:#f59e0b,color:#fff
    style Errors fill:#ef4444,color:#fff
    style Transpile fill:#059669,color:#fff
    style JS fill:#7c3aed,color:#fff
    style Runtime fill:#10b981,color:#fff

TypeScript adds a compile-time type checking layer between your code and runtime execution.

Who uses TypeScript?

1. Enable strict: true in tsconfig.json from the start
2. Prefer interface over type for object shapes (they extend better)
3. Avoid any — use unknown when you don’t know the type
4. Use const assertions (as const) for literal types
5. Export types from a central types.ts file
6. Use branded types for domain primitives (e.g., UserId instead of string)
7. Run tsc --noEmit in CI to catch type errors

Easy: What is the difference between TypeScript and JavaScript?

Medium: Explain how TypeScript’s compilation process works. What does tsc do?

Hard: How does TypeScript enable better refactoring in large codebases compared to JavaScript?

flowchart TB
    JS[JavaScript Developer] --> Basic[Basic Types & Inference]
    Basic --> Func[Functions & Objects]
    Func --> Inter[Interfaces & Generics]
    Inter --> Adv[Utility & Advanced Types]
    Adv --> FW[React / Node / Angular Integration]
    FW --> Ent[Enterprise TypeScript 🚀]

    style JS fill:#3b82f6,color:#fff
    style Basic fill:#7c3aed,color:#fff
    style Func fill:#059669,color:#fff
    style Inter fill:#f59e0b,color:#fff
    style Adv fill:#ec4899,color:#fff
    style FW fill:#06b6d4,color:#fff
    style Ent fill:#10b981,color:#fff