cf.completefrontend
THE TYPESCRIPT FIELD GUIDE

TypeScript

The complete path through JavaScript with types: from your first annotation and the everyday types, through narrowing, generics, and types built from other types, to typing the DOM and React, and how the compiler checks your code. Written for learners who already know JavaScript; each lesson pairs a short explanation with code you can run and change.

73 of 73 lessons available19 modules10 stagesBeginner to expert
Try TypeScript in the code editor
Start hereLesson 1.1

Why TypeScript?

What TypeScript is, which mistakes it catches before your users see them, and what it costs.

Start the first lesson View in learning path
Welcome to TypeScript15 min + experiments

// What you’ll learn

  • JavaScript with types
  • Bugs caught while you type
  • Editor help: autocomplete and rename
  • What TypeScript doesn't do

Your progress

View detailed stats
0%completed
0 of 73 lessons
day streak
0
days this week
0
stages done
0/10

Recent activity

View all

Lessons you open and finish, and your quiz scores, show up here.

Next up for you

Quick actions

Recommended for you Based on your progress

The learning path

73 of 73 available

10 stages, in order. Each one builds on the last, from your first typed program to the compiler's internals. Jump to a stage, or search for any topic.

  1. STAGE 1 · BEGINNERGetting started1 module · 4 lessons
  2. STAGE 2 · BEGINNEREveryday types3 modules · 14 lessons
  3. STAGE 3 · BEGINNERNarrowing & type safety2 modules · 7 lessons
  4. STAGE 4 · INTERMEDIATEObjects & classes2 modules · 9 lessons
  5. STAGE 5 · INTERMEDIATEGenerics1 module · 5 lessons
  6. STAGE 6 · ADVANCEDTypes from types3 modules · 9 lessons
  7. STAGE 7 · INTERMEDIATEModules & projects2 modules · 7 lessons
  8. STAGE 8 · INTERMEDIATETypeScript for the frontend2 modules · 7 lessons
  9. STAGE 9 · ADVANCEDAdvanced patterns2 modules · 7 lessons
  10. STAGE 10 · EXPERTUnder the hood1 module · 4 lessons

73 lessons in 10 stages and 19 modules.

Stage 1 Beginner

Getting started

What TypeScript adds to JavaScript, how its compiler works, and your first typed program.

1 module · 4 lessons

  1. 4 lessons · 1 h 3 min

    Module 1: Welcome to TypeScript

    Why types help, what the compiler does with them, and how to set up a project.

    1. 1.1Why TypeScript?15 min
    2. 1.2How TypeScript works16 min
    3. 1.3Setting up a project16 min
    4. 1.4Your first typed program16 min

Stage 2 Beginner

Everyday types

The types you write every day: primitives, arrays, objects, unions, literals, and functions.

3 modules · 14 lessons

  1. 5 lessons · 1 h 25 min

    Module 2: Basic types

    Primitives, annotations and inference, and the special types any, unknown, and never.

    1. 2.1Primitive types16 min
    2. 2.2Type annotations & inference16 min
    3. 2.3Arrays & tuples17 min
    4. 2.4Object types18 min
    5. 2.5any, unknown & never18 min
  2. 5 lessons · 1 h 22 min

    Module 3: Combining types

    Unions, literal types, names for types, and the null and undefined rules.

    1. 3.1Union types15 min
    2. 3.2Literal types15 min
    3. 3.3Type aliases & interfaces17 min
    4. 3.4null, undefined & strictNullChecks18 min
    5. 3.5Enums17 min
  3. 4 lessons · 1 h 11 min

    Module 4: Functions

    Typing parameters and return values, function types, overloads, and this.

    1. 4.1Typing functions18 min
    2. 4.2Function types18 min
    3. 4.3Function overloads18 min
    4. 4.4this in TypeScript17 min

Stage 3 Beginner

Narrowing & type safety

How TypeScript follows your checks to know a value's exact type, and how to model data safely.

2 modules · 7 lessons

  1. 5 lessons · 1 h 26 min

    Module 5: Narrowing

    Turning a wide type into a precise one with ordinary JavaScript checks.

    1. 5.1Narrowing with typeof & truthiness18 min
    2. 5.2in & instanceof narrowing16 min
    3. 5.3Discriminated unions18 min
    4. 5.4Exhaustiveness checking16 min
    5. 5.5Type predicates & assertion functions18 min
  2. 2 lessons · 33 min

    Module 6: Assertions & checks

    Telling the compiler what you know, and checking a value against a type without losing detail.

    1. 6.1Type assertions16 min
    2. 6.2as const & satisfies17 min

Stage 4 Intermediate

Objects & classes

How TypeScript compares object types, describes dictionaries and combinations, and types classes.

2 modules · 9 lessons

  1. 5 lessons · 1 h 24 min

    Module 7: Object types in depth

    Structural typing, index signatures, extra property checks, and intersections.

    1. 7.1Structural typing18 min
    2. 7.2Excess property checks16 min
    3. 7.3Index signatures & Record18 min
    4. 7.4Intersection types16 min
    5. 7.5Declaration merging16 min
  2. 4 lessons · 1 h 4 min

    Module 8: Classes

    Typing class fields and methods, controlling access, and sharing contracts.

    1. 8.1Classes in TypeScript16 min
    2. 8.2public, private, protected & #private17 min
    3. 8.3implements & abstract classes16 min
    4. 8.4Static members & class types15 min

Stage 5 Intermediate

Generics

Write functions, types, and classes that work with any type while keeping it precise.

1 module · 5 lessons

  1. 5 lessons · 1 h 30 min

    Module 9: Generics

    Type parameters, constraints, defaults, and generics in real frontend code.

    1. 9.1Generic functions18 min
    2. 9.2Generic constraints18 min
    3. 9.3Generic types & interfaces18 min
    4. 9.4Generic classes18 min
    5. 9.5Generics in practice18 min

Stage 6 Advanced

Types from types

Build new types from existing ones: keyof, indexed access, conditional, mapped, and template literal types.

3 modules · 9 lessons

  1. 2 lessons · 34 min

    Module 10: Type operators

    Get a type's keys, a value's type, and the type of a property.

    1. 10.1keyof & typeof18 min
    2. 10.2Indexed access types16 min
  2. 4 lessons · 1 h 14 min

    Module 11: Conditional & mapped types

    Types that choose and types that transform every property.

    1. 11.1Conditional types18 min
    2. 11.2The infer keyword20 min
    3. 11.3Mapped types20 min
    4. 11.4Template literal types16 min
  3. 3 lessons · 56 min

    Module 12: Utility types

    The built-in helper types, how they're written, and how to write your own.

    1. 12.1Partial, Pick, Omit & friends16 min
    2. 12.2ReturnType, Awaited & more20 min
    3. 12.3Writing your own utility types20 min

Stage 7 Intermediate

Modules & projects

Types across files and packages: modules, declaration files, and the compiler options that matter.

2 modules · 7 lessons

  1. 3 lessons · 54 min

    Module 13: Modules & declaration files

    Importing types, typing JavaScript libraries, and describing globals.

    1. 13.1Modules & type imports18 min
    2. 13.2Declaration files (.d.ts)18 min
    3. 13.3Globals & module augmentation18 min
  2. 4 lessons · 1 h 15 min

    Module 14: Configuring TypeScript

    The tsconfig.json options that change how strict, what JavaScript, and which files.

    1. 14.1Strict mode options20 min
    2. 14.2target, lib & module20 min
    3. 14.3Type checking vs type stripping18 min
    4. 14.4Types in JavaScript files17 min

Stage 8 Intermediate

TypeScript for the frontend

Types for the code frontend developers write: the DOM, events, fetch, async code, and errors.

2 modules · 7 lessons

  1. 5 lessons · 1 h 30 min

    Module 15: TypeScript in the browser

    The DOM's types, events, and data that comes from the network.

    1. 15.1Typing the DOM18 min
    2. 15.2Typing events18 min
    3. 15.3Typing fetch & JSON18 min
    4. 15.4Promises & async functions18 min
    5. 15.5Typing errors18 min
  2. 2 lessons · 42 min

    Module 16: TypeScript for UI code

    Typing components, state, and the props that flow between them.

    1. 16.1Typing React components20 min
    2. 16.2Typing state & hooks22 min

Stage 9 Advanced

Advanced patterns

Patterns from real codebases: branded types, type-safe APIs, decorators, and migrating to TypeScript.

2 modules · 7 lessons

  1. 4 lessons · 1 h 23 min

    Module 17: Type-safe patterns

    Techniques that make wrong code impossible to write.

    1. 17.1Branded types18 min
    2. 17.2Type-safe APIs & routes20 min
    3. 17.3Variance & assignability20 min
    4. 17.4Decorators25 min
  2. 3 lessons · 1 h 2 min

    Module 18: TypeScript in real projects

    Moving a codebase to TypeScript and keeping its types healthy.

    1. 18.1Migrating JavaScript to TypeScript20 min
    2. 18.2Reading type errors20 min
    3. 18.3Habits of good TypeScript22 min

Stage 10 Expert

Under the hood

How the compiler parses, binds, checks, and emits, and the rules its checker follows.

1 module · 4 lessons

  1. 4 lessons · 1 h 40 min

    Module 19: The compiler

    From source text to errors and JavaScript.

    1. 19.1Inside the compiler25 min
    2. 19.2How inference works25 min
    3. 19.3Control flow analysis25 min
    4. 19.4Limits & soundness25 min