The Complete TypeScript Course

Nine hands-on lessons that take you from vanilla JS to type-safe code shipping in CI — every step animated so you can see exactly what to do. 🎬

🎬 9 animated demos 🧠 9 quizzes 📋 Copy-ready code ⏱ ~35 min total

🚀 Start the course

LESSON 1 · ~4 MIN · SETUP

Install & Setup TypeScript

Get the compiler, generate tsconfig.json, and turn your first .ts file into plain JavaScript. 👇

Install the compiler

TypeScript ships as the tsc CLI. Install it as a dev dependency:

bash

npm install typescript --save-dev

Generate tsconfig.json

This file controls everything — strictness, output folder, module system:

bash

npx tsc --init

Turn on "strict": true — it's the single best setting for catching bugs early.

Compile your first file

Write hello.ts, then compile — the output is plain .js any browser can run:

bash

npx tsc hello.ts   // → hello.js

🎬 Live: installing TS, scaffolding & compiling DEMO

bash — my-ts-project

➜ ~/my-ts-project npm i -D typescript

✔ added 1 package (typescript 5.x)

➜ ~/my-ts-project npx tsc --init

✔ Created tsconfig.json

tsconfig.json

src/

hello.ts

hello.js ← compiled

✓ Compiled successfully

🧠 QUIZ · LESSON 1

Which command generates a starter tsconfig.json?

LESSON 2 · ~4 MIN · BASICS

Basic Types

Annotate your variables and let the compiler be your safety net — watch it catch a bug before your code ever runs.

Annotate with :

The syntax is variable: type. Once typed, TypeScript guards that variable forever:

types.ts

let name: string = 'Ada'
let age: number = 36
let ok: boolean = true
let ids: number[] = [1, 2, 3]

stringnumberboolean string[]null / undefined⚠ avoid any

any turns TypeScript off for that variable. Prefer unknown — it forces you to check before using.

🎬 Live: TS catches a wrong type at compile time DEMO

types.ts

1234

let name: string = 'Ada'

let age: number = 36

let ok: boolean = true

age = 'thirty-six'

TS2322: Type 'string' is not assignable to type 'number'

✔ name, ok — fine ✗ age — string → number

🛡 Caught before runtime!

🧠 QUIZ · LESSON 2

Which is valid TypeScript syntax?

LESSON 3 · ~4 MIN · BASICS

Typing Functions

Type the parameters, type the return — and the compiler checks every single call site.

Params & return types

greet.ts

function greet(name: string): string {
  return `Hello, ${name}`
}

name?: string — optional: void — no returndefault: string = 'x'

🎬 Live: a valid call passes, a bad call is rejected DEMO

greet.ts

123456

function greet(name: string): string {

return `Hello, ${name}`

}

greet('Ada')

greet(42)

✓ greet('Ada') → "Hello, Ada" ✗ greet(42) — number ≠ string

TS2345: Argument of type 'number' is not assignable to parameter of type 'string'

✓ Signature enforced

🧠 QUIZ · LESSON 3

A function has no return statement. Its return type is…

LESSON 4 · ~4 MIN · BASICS

Interfaces & Object Types

Describe the shape of your data once — every object that claims it gets fully checked.

interface — the shape contract

Use ? for optional props and readonly to lock them after creation:

user.ts

interface User {
  readonly id: number
  name: string
  age?: number   // optional
}

interface vs type? For object shapes they're near-identical — type can also do unions, interface can be augmented.

🎬 Live: objects checked against the User shape DEMO

user.ts

123456

interface User {

name: string

age: number

}

const u: User = { name: 'Ada', age: 36 }

const bad: User = { name: 'Ada' }

✓ u matches User ✗ bad: 'age' is missing

TS2741: Property 'age' is missing in type '{ name: string; }'

✓ Shape contract enforced

🧠 QUIZ · LESSON 4

Which keyword describes the shape of an object?

LESSON 5 · ~3 MIN · BASICS

Unions & Literal Types

A variable that accepts 'idle', 'loading' or 'success' — and nothing else. Perfect for state machines.

The | operator

Unions allow one of several types. Literal types restrict to exact values:

status.ts

let id: string | number = 42

type Status = 'idle' | 'loading' | 'success'
let status: Status = 'loading'

Typo 'loaidng'? Compile error — instead of a silent bug in production. That's the power of literals.

🎬 Live: allowed values pass, 'done' is rejected DEMO

status.ts

12345

let status: 'idle' | 'loading' | 'success'

status = 'loading'

status = 'success'

status = 'done'

status: 'loading' ✓ status: 'success' ✓ status: 'done' ✗

'loading' ✓ 'success' ✓ 'done' ✗ not in union

✓ Literals enforced

🧠 QUIZ · LESSON 5

What does let id: string | number mean?

LESSON 6 · ~4 MIN · OOP

Classes & Access Modifiers

TypeScript classes add real access control — private members are blocked at compile time, not by convention.

public · private · readonly

counter.ts

class Counter {
  private count = 0
  increment() { this.count++ }
  get value() { return this.count }
}

public — defaultprivate — class onlyreadonly — init onceprotected — subclasses

🎬 Live: increment works, touching count is blocked DEMO

counter.ts

12345678

class Counter {

private count = 0

increment() { this.count++ }

}

const c = new Counter()

c.increment()

c.count // ✗

count: 0 count: 1 (via increment)

✓ c.increment() called ✗ c.count — property is private ✓ c.value → 1

🔒 Encapsulation enforced

🧠 QUIZ · LESSON 6

Which modifier hides a member from outside the class?

LESSON 7 · ~4 MIN · LEVEL UP

Generics — <T>

Write a function once, keep full type-safety for every type you call it with. This is the <T> you see everywhere.

Type variables

T is a placeholder the caller fills in — input and output stay linked:

first.ts

function first<T>(items: T[]): T {
  return items[0]
}

first(['a', 'b'])  // T = string → 'a'
first([1, 2, 3])   // T = number → 1

Array<T>Promise<T>Record<K,V>Map<K,V>

🎬 Live: T morphing to match each call DEMO

first.ts

123456

function first<T>(items: T[]): T {

return items[0]

}

first(['a', 'b']) // 'a'

first([1, 2, 3]) // 1

T = ? T = string → returns 'a' T = number → returns 1

✓ first(['a','b']) → 'a' (string) ✓ first([1,2,3]) → 1 (number)

✓ One function, many types

🧠 QUIZ · LESSON 7

What are generics for?

LESSON 8 · ~3 MIN · LEVEL UP

Narrowing & Type Guards

Union types are only useful if you can safely tell them apart at runtime. That's narrowing.

typeof narrows the branch

Inside an if, TypeScript knows exactly which member of the union you have:

len.ts

function len(x: string | number) {
  if (typeof x === 'string') {
    return x.length      // x: string
  }
  return x.toString().length // x: number
}

Other guards: instanceof, 'prop' in obj, and discriminated unions — a shared kind literal field you switch on.

🎬 Live: each value flowing into the right branch DEMO

len.ts

123456

function len(x: string | number) {

if (typeof x === 'string') {

return x.length

}

return x.toString().length

}

string branch → x.length

number branch → toString().length

✓ len('hello') → 'hello' is string → 5 ✓ len(42) → 42 is number → 2

✓ Narrowed safely

🧠 QUIZ · LESSON 8

Checking typeof x === 'string' to split a union is called…

LESSON 9 · ~4 MIN · SHIP IT

Compile, Watch & CI

Recompile on every save, keep strict mode on, and block broken code in your pipeline.

Watch mode

Recompiles instantly on every save — errors appear the moment you type them:

bash

npx tsc --watch

Type-check in CI

--noEmit checks types without writing files — perfect as a pipeline gate:

.github/workflows/ci.yml

name: Type Check
on: [push]
jobs:
  tsc:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npx tsc --noEmit

Also try tsc --noEmit --watch locally with bundlers like Vite/esbuild, which handle the JS output.

🎬 Live: watch mode catching an error, then passing DEMO

bash — tsc --watch

➜ ~/my-ts-project npx tsc --watch

Starting compilation in watch mode…

✗ TS2322: 'number' not assignable to 'string'

✔ Found 0 errors. Watching for changes…

✗ error detected — instant feedback ✔ file fixed → recompiled ✓

🛡 Type-safe & shipping 🚀

🧠 QUIZ · LESSON 9

Which command recompiles automatically on save?

TypeScript HandBook - IM CSEIAN | IMCSEIAN

The Complete TypeScript Course

🚀 Start the course

Install & Setup

Basic Types

Functions

Interfaces & Objects

Unions & Literals

Classes & OOP

Generics

Narrowing & Guards

Compile & Watch

Install & Setup TypeScript

Install the compiler

Generate tsconfig.json

Compile your first file

Basic Types

Annotate with :

Typing Functions

Params & return types

Interfaces & Object Types

interface — the shape contract

Unions & Literal Types

The | operator

Classes & Access Modifiers

public · private · readonly

Generics — <T>

Type variables

Narrowing & Type Guards

typeof narrows the branch

Compile, Watch & CI

Watch mode

Type-check in CI

Comments

Comments

Post a Comment