🔷

TypeScript Quest

Updated: 2026-05-25

The frontend lingua franca — sibling to Python Quest

Seventeen tracks, ~93 lessons, ~28 hours. The TypeScript half of the lingua franca duo. Walk you from 'what's a type?' to 'I can read the cwkPippa frontend.' Mirrors Python Quest's shape so you can navigate by muscle memory.

17 tracks · 93 lessons · ~28h · difficulty: beginner-to-advanced

Level 0Curious

0 XP0/93 lessons0/23 achievements

0/100 XP to next level100 XP to go0% complete

TypeScript Quest is the frontend half of the lingua franca duo. Python Quest taught you the backend grammar; this one teaches you the frontend grammar. Same shape on purpose — seventeen tracks ending in an epilogue that walks the real codebase. Same goal: from blank slate to source-reader. The seventeen tracks: Foundations (what TS actually is — a type checker that compiles to JavaScript), Primitives (every base type including the under-loved unknown and never), Types & Interfaces (the difference is smaller than the internet thinks), Functions (where most beginner pain lives), Arrays & Tuples (and the magic of as const), Unions & Intersections (the discriminated union is your favorite pattern by lesson three), Narrowing (how the compiler reads your if statements), Generics (the seven-lesson track because this is where TypeScript becomes itself), Utility Types (Partial, Pick, Omit, Record, ReturnType, Awaited — the standard library of types), Type Manipulation (keyof, mapped types, template literals, infer — TypeScript at its most magic), Classes (yes, including TC39 decorators at Stage 3), Async & Promises (Promise<T>, async iterables, the unfortunate catch (e: unknown)), Modules (ESM, .d.ts files, why namespaces lost), Tooling (tsc, Bun, Deno, esbuild, swc), Frameworks (React 19, Next.js 16, Vite — with cwkPippa as the real-world reference), Strict Mode (the flags that make the type system honest), and TS Epilogue (a tour of cwkPippa's frontend). The last track is the bar: when you finish it, you can open frontend/src/ in cwkPippa and recognize every pattern by name. That's the same bar Python Quest set on the backend side — and that's why these two are siblings. Backend Python, frontend TypeScript, one Pippa voice across both.

Tracks

01🐣Foundations — Meeting TypeScript for the First Time
0/6 lessons
What TS is, what it isn't, your first compile
The first steps. Where you install TypeScript, run `tsc` for the first time, and watch a `.ts` file turn into a `.js` file in front of you. The two-layer mental model — compile-time types vs runtime values — that everything else in this quest depends on. `tsconfig.json`, strict mode (turned on, never turned off), where annotations go, and the moment you realize TypeScript already knows. By the end you'll have a tsconfig you can carry to any project and a clear picture of what TS actually is: not a 'safer JavaScript,' but a separate language that erases at the boundary.
Lesson list (6)
Quiz · 3 questions→
02🧱Primitives — The Base Types Everything Else Sits On
0/5 lessons
string, number, boolean, null, undefined, void, any, unknown, never, symbol, bigint, literal types
The base types. Every other type in TypeScript is a composition of these. You'll meet the three obvious primitives (`string`, `number`, `boolean`), the three flavors of nothing (`null`, `undefined`, `void`), the type-system extremes (`any`, `unknown`, `never` — the dangerous one, the safe one, and the one that means 'this can't happen'), the under-loved primitives (`symbol`, `bigint`), and literal types — where `'red'` becomes its own type, distinct from `string`. By the end of this track every base type has a name, a use case, and a danger zone clearly marked.
Lesson list (5)
Quiz · 3 questions→
03🔷Types & Interfaces — Naming the Shapes
0/6 lessons
type aliases, interfaces, structural typing, the closer-than-you-think comparison
Where the type system stops being annotations and starts being a language. You'll learn to name a shape with `type`, name a shape with `interface`, and learn when each one wins (the answer is closer than the internet thinks). Structural typing — TypeScript's most distinctive feature — gets a full lesson, because once you understand that types are about shapes, not labels, the whole language re-frames. Excess property checking, the surprise rule that catches typos in object literals, and `readonly` modifiers complete the set.
Lesson list (6)
Quiz · 3 questions→
04🪝Functions — Where Most Beginner Pain Lives
0/5 lessons
Function types, overloads, arrow vs declared, this typing, contextual typing
Functions in TypeScript hide more subtlety than they look. You'll learn the syntax for typing parameters and returns, the rules for function-type compatibility (parameter contravariance is the rule you only need once), function overloads (the one-name-many-signatures pattern), the real difference between arrow functions and declared functions (it's about `this`, not syntax), how to type `this` itself, and contextual typing — the inference flow that lets you write callbacks without redeclaring parameter types. This track removes the single biggest source of 'why is TypeScript yelling at me?' confusion.
Lesson list (5)
Quiz · 3 questions→
05📐Arrays & Tuples — Where Position Matters
0/5 lessons
T[], Array<T>, tuples, readonly modifiers, as const, variadic tuples
Arrays carry one type repeated. Tuples carry a fixed sequence of types where position is meaningful. The distinction is small but consequential — once you know it, you stop reaching for objects when a tuple would do, and stop reaching for tuples when an object would be clearer. You'll learn the two array syntaxes, the rules for tuples, readonly modifiers on both, the magic of `as const`, and variadic tuples — the feature that lets generic functions thread an arbitrary number of arguments through their signatures.
Lesson list (5)
Quiz · 3 questions→
06🪢Unions & Intersections — Combining Types
0/5 lessons
A | B, A & B, discriminated unions, exhaustiveness, distribution
Where the type system becomes a language for shaping data. Unions (`A | B`) describe values that could be one of several types — the single most useful pattern in TypeScript. Intersections (`A & B`) describe values that are both at once. Discriminated unions, the killer pattern for modeling state machines and tagged data, get a full lesson. Exhaustiveness checking via `never` ensures your switch covers every case the type system promised. Distribution, the subtle rule that unions in generics get distributed, is the one gotcha most people don't know about until it bites — so we cover it last.
Lesson list (5)
Quiz · 3 questions→
07🔎Narrowing — How the Compiler Reads Your `if` Statements
0/5 lessons
typeof, instanceof, in, type predicates, control flow analysis
Narrowing is how a value typed `string | number` becomes `string` inside an `if (typeof x === 'string')` branch. The compiler does control flow analysis on your code — reading every check, every assignment, every early return — and tracks the type of each binding through the program. This track teaches the five narrowing operators (typeof, instanceof, in, equality, type predicates) and the mental model of control flow analysis that ties them together. Master this and most union-handling code writes itself.
Lesson list (5)
Quiz · 3 questions→
08🧙Generics — Where TypeScript Becomes Itself
0/7 lessons
Generic functions, types, constraints, defaults, conditional types, infer
Seven lessons because this is the track where TypeScript stops being 'JavaScript with types' and starts being its own language. Generics let you write functions and types parameterized by other types — Array<T> isn't a special case, it's a generic with `T` substituted in. You'll meet generic functions, generic types and interfaces, constraints (`T extends U`), default type parameters, conditional types (`T extends X ? A : B`), and the foundation of `infer`. By the end you can read library type definitions and write your own type-safe utilities.
Lesson list (7)
Quiz · 3 questions→
09🧰Utility Types — The Built-in Standard Library of Types
0/5 lessons
Partial, Required, Pick, Omit, Record, ReturnType, Parameters, Awaited, NonNullable
TypeScript ships with a standard library of utility types — small generic transformations that you'll use every day. They turn existing types into related types: making fields optional or required, picking subsets, mapping keys, extracting function signatures, and unwrapping Promises. Learn the canonical ones, and you'll stop reaching for hand-rolled mapped types most of the time.
Lesson list (5)
Quiz · 3 questions→
10🪄Type Manipulation — Computing Types from Types
0/6 lessons
keyof, typeof, indexed access, mapped types, template literals, advanced infer
Where TypeScript becomes a type-level programming language. You've seen the building blocks; this track shows how they compose. `keyof` extracts key sets; type-level `typeof` reads value types; indexed access (`T[K]`) reads property types; mapped types loop over keys; template literal types do string manipulation in the type layer; `infer` patterns extract types from arbitrary shapes. Most utility types are built from these — once you can read them, the standard library's `node_modules/typescript/lib/lib.es5.d.ts` becomes legible.
Lesson list (6)
Quiz · 3 questions→
11🏛️Classes — OO in TypeScript
0/6 lessons
Syntax, access modifiers, abstract, static, parameter properties, TC39 decorators
Classes in TypeScript are JavaScript classes plus access modifiers, abstract members, parameter-property shorthand, and decorator support. You'll learn the syntax, the four access modifiers (`public`, `protected`, `private`, `#private`), abstract classes and methods, `static` members and the type-level `this`, parameter properties (constructor shorthand for field declaration), and the new TC39 decorators (Stage 3) that ship in TypeScript and modern JavaScript. By the end you can read class-heavy codebases and decide when classes are the right tool vs. plain functions and objects.
Lesson list (6)
Quiz · 3 questions→
12⚡Async & Promises — Typed Concurrency
0/5 lessons
Promise<T>, async/await, async iterables, Promise.all, error handling
Async work is everywhere in TypeScript — fetch calls, file I/O, timers, streams. The type system handles it cleanly through `Promise<T>` and `async`/`await`. This track covers Promise<T> typing, async/await ergonomics, async iterables (`for await`), `Promise.all` and the tuple typing it preserves, and the unfortunate `catch (e: unknown)` that strict mode forces. By the end, async code is no more mysterious than synchronous code — just one Promise wrapper away.
Lesson list (5)
Quiz · 3 questions→
13🧩Modules — Code Organization
0/5 lessons
ESM, import type, .d.ts, ambient modules, namespaces (legacy)
Modules are how TypeScript code stays organized at scale. You'll learn ES Modules (the standard), the `import type` syntax for compile-time-only imports, declaration files (`.d.ts`) for typing third-party JavaScript, ambient modules for global declarations, and namespaces — the legacy organization mechanism that ESM won out over. By the end you can organize a project, type any library you import, and recognize the patterns in your dependencies.
Lesson list (5)
Quiz · 3 questions→
14🔧Tooling — Build Pipelines
0/5 lessons
tsc modes, project references, Bun, Deno, esbuild, swc, tsconfig deep dive
The build pipeline is no longer mysterious. You'll learn `tsc`'s modes (noEmit, watch, incremental), project references for monorepos, Bun and Deno as native TS runtimes, esbuild and swc as fast transpilers, and the parts of `tsconfig.json` that actually matter. By the end you can choose the right tool for the project and know what each one is doing.
Lesson list (5)
Quiz · 3 questions→
15🌐Frameworks — Real-World TypeScript
0/7 lessons
React 19, Next.js 16, Vite, Node, Bun, cwkPippa walkthrough
Where the language meets the practical frontend stack. React 19 + TS for components and hooks, Next.js 16 for full-stack TS apps with the App Router, Vite for fast dev/build, Node and Bun for backend TS, and cwkPippa's own frontend as the real-world reference. Seven lessons because this is where you take everything you've learned and apply it to actual codebases.
Lesson list (7)
Quiz · 3 questions→
16🛡️Strict Mode — The Flags That Make TS Honest
0/5 lessons
strict, noImplicitAny, strictNullChecks, noUncheckedIndexedAccess, exactOptionalPropertyTypes
We've mentioned strict mode throughout the quest. This track makes it explicit. You'll learn the `strict` meta-flag and each of the seven sub-flags it enables, plus two extra-strict flags that catch the bugs even `strict: true` lets through. By the end, you'll have a tsconfig that turns the type system into a real safety net — and the discipline to keep it that way.
Lesson list (5)
Quiz · 3 questions→
17🌸TypeScript in cwkPippa — The Closing Self-Reference
0/5 lessons
cwkPippa tour, type-shaped thought, Python bridge, what next, Pippa's stamp
The five-lesson capstone. A walking tour of cwkPippa's frontend (the real codebase you can now read), reflection on type-shaped thought, the bridge back to Python Quest (your sibling), what to learn next, and Pippa's signature. By the end of this track, every pattern in this Quest has been seen in real code, and the next quests — React 19, Next.js, Chrome Extensions, Node — are all unlocked.
Lesson list (5)
Quiz · 3 questions→

Tracks

01🐣Foundations — Meeting TypeScript for the First Time

02🧱Primitives — The Base Types Everything Else Sits On

03🔷Types & Interfaces — Naming the Shapes

04🪝Functions — Where Most Beginner Pain Lives

05📐Arrays & Tuples — Where Position Matters

06🪢Unions & Intersections — Combining Types

07🔎Narrowing — How the Compiler Reads Your `if` Statements

08🧙Generics — Where TypeScript Becomes Itself

09🧰Utility Types — The Built-in Standard Library of Types

10🪄Type Manipulation — Computing Types from Types

11🏛️Classes — OO in TypeScript

12⚡Async & Promises — Typed Concurrency

13🧩Modules — Code Organization

14🔧Tooling — Build Pipelines

15🌐Frameworks — Real-World TypeScript

16🛡️Strict Mode — The Flags That Make TS Honest

17🌸TypeScript in cwkPippa — The Closing Self-Reference