TypeScript

Learning path and working reference for TypeScript, from first annotation to tsconfig and the type-level end of the language. Part of the Frontend Roadmap. See also JavaScript for the language underneath, and Tooling for the bundlers and linters that compile it.

Learn

• TypeScript Handbook — The official book on the language, and the thing every other resource assumes you have read.
• TypeScript for JavaScript Programmers — The five-minute version, for someone who already writes JavaScript. [beginner]
• Total TypeScript Essentials — Free book that teaches the language through exercises you fix in place.
• Total TypeScript Tutorials — Free interactive workshops on the beginner path, generics, and type transformations.
• TypeScript Deep Dive — Free book covering the language and the day-to-day gotchas around it.
• Effective TypeScript — Item-by-item advice on writing TypeScript that pulls its weight. [intermediate]

Reference

Core concepts

• The Basics — What static types are and what the compiler actually checks for you.
• Everyday Types — The handful of types you write on most lines of most files.
• Unions and Intersections — Values that are one of several types, and shapes combined out of several types.
• Narrowing — How control flow turns a wide union into one concrete type.
• Type Predicates — Writing x is Foo guards so narrowing survives a function call.
• Discriminated Unions — Modelling state as a tagged union so impossible combinations stop compiling.
• Functions — Parameters, return types, overloads, and generic signatures.
• Object Types — Optional, readonly, and index-signature members of an object shape.
• Generics — Functions and types that keep the caller’s type instead of widening it away.
• unknown — The safe alternative to any for a value you have not checked yet.
• never — The type of a value that cannot exist, and the trick behind exhaustiveness checks.
• Classes — Members, visibility, inheritance, and type parameters on classes.
• Modules — Imports, exports, and what makes TypeScript treat a file as a module at all.

Type-level techniques

• Utility Types — Built-ins such as Partial, Pick, Omit, and ReturnType.
• keyof — The union of an object type’s keys, and the basis of most generic helpers.
• Conditional Types — Types that branch on extends, which is where type-level code starts.
• infer — Capturing a type out of another type from inside a conditional.
• Mapped Types — Building a new object type by transforming every key of an existing one.
• Template Literal Types — String types built from other string types, plus Uppercase and friends.
• satisfies — Checking a value against a type without throwing away the narrower inferred one.
• const Assertions — as const, which freezes a literal into its narrowest readonly type.

Project setup

• TSConfig Reference — Every compiler option, what it does, and what it defaults to.
• Project Configuration — What a tsconfig.json is for, and how the compiler finds and merges it.
• TSConfig Cheat Sheet — One annotated tsconfig for a modern app, with the reasoning behind each line.
• TSConfig Bases — Ready-made configs per runtime and framework, meant to be extended rather than copied.
• strict — The flag that switches on the checks the type system is worth using for. Turn it on first.
• noUncheckedIndexedAccess — Makes arr[i] possibly undefined, which it always was.
• moduleResolution — Set to "bundler" for an app built by Vite, webpack, or esbuild.
• verbatimModuleSyntax — Emits imports exactly as written, so a single-file transpiler cannot guess wrong.
• paths — Import aliases such as @/components, which the bundler must be told about too.
• Type-Only Imports — import type, which is erased at build time instead of pulling in a module.
• Declaration Files — Reading and writing the .d.ts files that put types on untyped JavaScript.
• DefinitelyTyped — The @types/* repository, for libraries that ship no types of their own.

With React

• React TypeScript Cheatsheet — The canonical answer to “how do I type this React thing”.
• Using TypeScript — React’s own guide to typing components, props, and hooks.
• Typing Components — Props, children, and the shapes a component is allowed to accept.
• Typing Hooks — useState, useReducer, and the two flavours of useRef.
• Forms and Events — Which event type belongs on which handler, without reaching for any.

Practice

• Type Challenges — Type-level puzzles from warm-up to extreme, solved in the playground.
• TypeScript Exercises — Sixteen broken files to repair, each one teaching a single idea.
• Type-Level TypeScript — Free course treating the type system as the functional language it is. [advanced]
• Exercism — TypeScript track with exercises and free human mentoring.

Tools

• TypeScript Playground — Run, share, and inspect types in the browser, with every compiler flag exposed.
• TypeScript Cheat Sheets — Official one-page sheets for types, interfaces, classes, and control flow.
• tsx — Runs a TypeScript file directly in Node, with no build step in front of it.
• typescript-eslint — Lint rules that use type information rather than the syntax tree alone.
• Zod — Runtime schema validation that infers the static type from the schema.
• type-fest — Collection of utility types the standard library leaves out.
• ts-reset — Sharpens built-in types, so JSON.parse returns unknown and filter(Boolean) works.

Deep dives

• Enums — Named constant sets. A union of string literals covers most uses with no emitted code.
• const Enums — Inlined enums, and why isolatedModules and single-file transpilers reject them.
• Decorators — Legacy: the experimentalDecorators design, still what Angular and NestJS are built on.
• Decorators in TypeScript 5.0 — The TC39 standard decorators that supersede the legacy ones, and how they differ.
• Namespaces — Legacy: the pre-modules way of grouping code. Do not learn this before ES modules.
• Module Resolution — The classic and Node algorithms, kept for codebases predating "bundler".
• Iterators and Generators — Typing the iterable protocols and generator functions.
• Release Notes — What landed in every version, which is the real changelog of the type system.
• A 10x Faster TypeScript — The port of the compiler to Go that becomes TypeScript 7.