TypeScript 5 — 8 Modules · 60+ Examples

TypeScript from Types to Type-Level.

JavaScript with a static type system layered on top. Catch bugs before they run, get real autocomplete, and model your domain precisely with generics, discriminated unions, and utility types. Compiles away to plain JavaScript.

Start with Basics JS first? →

⬡TypeScript 5 ⬡60+ examples ⬡Superset of JS ⬡Type-safe

8 Modules Basics → Practice

60+ Examples Runnable code snippets

0 Runtime Cost Types erase at compile

35 Practice Programs Basic → Advanced

Open the TypeScript roadmap Every module and the sections inside it as one connected flow chart, in the order this track teaches them. Explore →

Curriculum

All 8 TypeScript modules

Follow the path top-to-bottom or jump to the module you need.

Module 01

TypeScript Basics

TypesInferenceunknown

Where every TS journey starts. Type annotations, inference, and the crucial any/unknown/never distinction.

Starter level

Learn →

Module 02

Functions & Narrowing

OverloadsGuardsNarrowing

Typed parameters, overloads, and how narrowing plus custom type guards refine a value's type as it flows.

interface vs type alias, optional and readonly props, and TypeScript's structural typing.

UnionsLiteralsDiscriminated

Union and intersection types, literal types, and the discriminated-union pattern with exhaustiveness checks.

Generic functions, interfaces and classes, constraints with extends, and the powerful keyof pattern.

UtilityMappedConditional

Utility types (Partial, Pick, Omit, Record), mapped types, and conditional types with keyof and infer.

Modifiersabstractimplements

Access modifiers, abstract classes, implements, parameter properties, and typed getters/setters.

tsconfig and strict mode, ES modules and the compile pipeline, and declaration files for typing JS.

GenericsGuardsUtility Types

35 hands-on programs from basic annotations to a typed EventEmitter, a Result type, and a DeepReadonly mapped type.

Advanced

Practice →

Why TypeScript?

JavaScript that scales

For any codebase past a weekend project, TypeScript pays for itself in caught bugs and confident refactors.

Catch Bugs Early

Type errors surface in your editor as you type, long before code runs. Studies estimate TS catches a meaningful share of production bugs at compile time.

Real Autocomplete

Because the compiler knows every type, editors give precise autocomplete, inline docs, and safe rename-across-project refactors.

Superset of JavaScript

Every valid JS file is valid TS. You can adopt it gradually, one file at a time, keeping your existing JavaScript running.

Industry Default

React, Angular, Vue, Node, and Deno all embrace TS. Most new frontend and full-stack roles expect it.

Fearless Refactoring

Change a type and the compiler shows you every call site that needs updating. Large refactors become mechanical instead of terrifying.

Types as Documentation

A function signature tells you exactly what goes in and comes out, and it never goes stale the way comments do.

Watch Out

TypeScript gotchas that trip up interviews

Common surprises — know these cold before your next interview.

TYPES ARE ERASED

function f(x: number) { /* ... */ }
// at runtime x could be ANYTHING
// from an untyped API. No runtime check.

Types vanish at compile time. A : number does not validate runtime data. Use a runtime validator (Zod) at trust boundaries.

any DEFEATS EVERYTHING

let a: any = "hi";
a.foo.bar.baz;   // no error, crashes at runtime
// use unknown instead — forces a check

One any silently turns off checking for everything it touches. Prefer unknown and narrow.

STRUCTURAL, NOT NOMINAL

interface Named { name: string; }
const dog = { name: "Rex", legs: 4 };
greet(dog);   // OK — matches by shape

Compatibility is by shape, not declared name. Anything with the right structure fits, no implements needed.

as IS NOT A CAST

const x = "5" as unknown as number;
x.toFixed();   // compiles, CRASHES at runtime

as is a compile-time assertion, not a conversion. It changes what TS believes, not the actual value. Use sparingly.

Code Preview

Taste the content

Three patterns from across the curriculum — click to switch.

ts_examples.ts

Discriminated Union

Generics

Utility Types

// A discriminated union — the tag narrows each branch
type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number };

function area(s: Shape): number {
  switch (s.kind) {
    case "circle": return Math.PI * s.radius ** 2;
    case "square": return s.side ** 2;
  }
}

// Generic + constraint — type-safe property access
function getProp<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const user = { name: "Ada", age: 36 };
getProp(user, "name");   // string
getProp(user, "age");    // number
// getProp(user, "email");   // Error: not a key of user

// Derive types from one source of truth
interface User { id: string; name: string; email: string; }

type UserPatch = Partial<User>;        // all optional
type PublicUser = Omit<User, "email">;  // no email
type ById = Record<string, User>;      // lookup map
// change User once, every derived type updates

New to JavaScript? Start there first.

TypeScript is a superset of JavaScript, so everything in the JS track carries over. If closures, the event loop, or async are still fuzzy, do the JavaScript track first, then add types.

JavaScript Track →

← Programming TypeScript Basics →