TypeScript Guide
About this guide
This is a 21-chapter guide that teaches TypeScript systematically, from the language spec to real-world practice. From getting started to the final project, you can work through it step by step across eight themes.
- Step by step: Starting from why you would use TypeScript, you learn in a continuous flow: syntax → type system → generics → practice
- Code-focused: Each chapter shows "when to use" each feature through plenty of Bad / Good comparisons and code snippets
- With exercises: Each chapter ends with "Hint" and "Answer and explanation" sections (collapsible)
- Known discoveries: Practical tips that are hard to see in the official reference appear throughout
Structure of the guide
Overview of the learning themes
The guide is organized into eight themes, and each theme spans several chapters.
| Theme | What it covers | Chapters | Overview |
|---|---|---|---|
| Getting started | What TypeScript is | 2 | The basic concepts of TypeScript and setting up the environment. Why you would use TypeScript |
| Basic types | From primitives to unions | 4 | Primitives / arrays / objects / unions / literals / enums |
| Functions | Typing functions | 2 | Function type annotations, overloads, and more advanced function types |
| Classes and OOP | Object orientation | 2 | Classes, inheritance, access modifiers, abstract classes |
| The advanced type system | Narrowing and transforming types | 2 | Type guards, tagged unions, and type operations such as keyof and satisfies |
| Generics | Generic type parameters | 4 | How generics work, constraints, mapped/conditional types, utility types |
| Dev environment | The toolchain | 2 | Modules, tsconfig, development tools |
| Practice | Real projects | 3 | React / Express / final project |
How to read this guide
- Beginners: Read from Getting started in order, and solve the exercises at the end of each chapter before moving on
- Experienced readers: It is fine to skim from the advanced type system or the practice theme
- Want to dig into a specific topic: Open the relevant chapter directly from the table above
How the four learning guides fit together
This guide focuses on systematically learning the TypeScript language spec. The site has four structured learning guides, and they complement one another.
| Axis | TypeScript Guide (this guide) | Introduction to React | Tailwind CSS Guide | Clean Code |
|---|---|---|---|---|
| Focus | Language spec | Framework | CSS styling | Design standards |
| Level | Beginner to intermediate | Beginner to intermediate | Beginner to intermediate | Intermediate and up |
| Prerequisite | JS basics | TS + JS | HTML/CSS basics | Any language |
| Example | "How to use mapped types" | "The dependency array of useEffect" | "Adding colors with @theme" | "Replace any with unknown + type guards" |
The four guides are complementary. Build your language foundation with this guide and assemble your UI with Introduction to React. On top of that, polish your styling with the Tailwind CSS Guide and raise your code quality with Clean Code. That is the intended learning path.
Now, let's start with Getting started.