Frontend & Backend Engineering

TypeScript Complete Guide

TypeScript is a typed superset of JavaScript, built by Microsoft, that compiles down to plain JavaScript before it ever runs. Every annotation you add — a parameter type, an interface, a generic constraint — is checked by the TypeScript compiler (tsc) at build time and then erased completely, so bugs that would otherwise surface in production get caught on your own machine instead. This doc walks through the 12 concepts that make up the language, in the order that builds most naturally on itself, each with a diagram, a genuine "where and when to use it" judgment call, and the concrete steps to put it into practice.

3 phases 12 topics 12 diagrams

Use the sidebar to jump straight to any topic — each one opens its own page with a full explanation, a diagram of how the concept actually connects to the code around it, and the concrete steps to use it. If you're starting from zero, work through Phase 1 first: everything past it assumes you're already comfortable annotating variables, functions, and object shapes.

Diagram · From Source File to Running Code

Nothing you write in a .ts file ever runs directly. It's read by tsc, which checks every annotation against how the code actually uses each value — that's the only moment a type error can be caught — and only then emits ordinary JavaScript with the types stripped out, ready for Node.js or a browser to run exactly as if it had been written in JavaScript all along.

All 12 topics in this guide

Summary & Learning Order

Once each individual topic makes sense on its own, these two references tie them together: the order to learn them in, and the single mental model — narrowing a union down to a specific type — worth internalizing above all others.

Recommended Learning Order

Key Pattern — Narrowing a Union Type

The single most useful habit in TypeScript: a union type isn't usable until a runtime check proves which member you're actually holding.

Diagram · typeof Check → Narrowed Branch

The value's declared type never changes — it's still string | number everywhere. What changes is what the compiler is willing to let you call: inside the true branch it treats the value as a string, inside false as a number, purely because the typeof check is code it can follow.

Official Documentation Reference URLs

Every topic covered in this guide, with a direct link to its official docs.