TypeScript from the ground up

A hands-on first course in TypeScript, from your first annotation to a small typed app: every idea comes with a page you can change and run, with a short quiz at the end of each chapter.

What You'll Learn

• Annotate values and functions, and say what they promise
• Let the compiler infer what you do not need to write
• Describe objects with interfaces and type aliases
• Narrow union types safely instead of reaching for any
• Write generic functions that keep their types
• Type the DOM: queries, elements and events
• Derive types from types with Partial and Record
• Use strict mode, and know what it turns on

Prerequisites

• The JavaScript course on this site, or the same ground: variables, functions, arrays, objects, and the DOM
• No TypeScript experience needed; the course starts at the first annotation

Course Content

1. 01
   How TypeScript works

   JavaScript plus type annotations: what the annotations are for, why the browser never sees them, and what the preview does with your code.

   Beginner · 12 min read

   Not started
2. 02
   Annotations and inference

   When to write the type out and when to let TypeScript work it out: inference, what a name that never changes is worth, and where the compiler has to be told.

   Beginner · 14 min read

   Not started
3. 03
   Functions and their signatures

   A function signature is a promise in two directions: what the caller may pass in, and what the function will hand back.

   Beginner · 14 min read

   Not started
4. 04
   Objects and interfaces

   Describing the shape of an object once — with an interface — and having every function that takes it, and every object that claims to be it, checked against that description.

   Beginner · 15 min read

   Not started
5. 05
   Unions and narrowing

   A value that may be one of two things: how to say so with a union, and how the compiler follows your checks until only one possibility is left.

   Beginner · 15 min read

   Not started
6. 06
   Lists and generics

   Typed lists that keep their element type through every map and filter, and the one idea behind them: a function that says "for any type" without losing track of which.

   Intermediate · 16 min read

   Not started
7. 07
   Classes and interfaces

   Typed state, methods that say what they take, `private` for what is nobody else’s business, and an interface a class can sign.

   Intermediate · 15 min read

   Not started
8. 08
   Exact values

   A type can name one exact value: a set of allowed strings instead of a loose one, and `as const` for the lists and objects that should never be edited by accident.

   Intermediate · 14 min read

   Not started
9. 09
   Telling the cases apart

   A union of objects with one field that says which one it is, a switch the compiler follows, and the check that proves every case was handled.

   Intermediate · 16 min read

   Not started
10. 10
    The page, typed

    Queries that know what they found, events that know what happened, and the one check the compiler insists on before any element is touched.

    Intermediate · 15 min read

    Not started
11. 11
    Types built from types

    Partial and Record: shapes derived from a shape you already have, so an update payload and a lookup table cannot drift from the thing they describe.

    Intermediate · 14 min read

    Not started
12. 12
    The compiler and its settings

    tsconfig, strict mode and what it turns on, the difference between `any` and `unknown`, and where the type checker sits in a real build.

    Advanced · 15 min read

    Not started
13. 13
    A small typed app

    Everything at once, on a page: a shape for each item, a typed list, functions with signatures, and a DOM query the compiler can vouch for.

    Advanced · 18 min read

    Not started