Free through lesson 3

TypeScript for Beginners

From type annotations and inference through union types, narrowing, generics, classes and utility types, all the way to async code and the DOM. Fifty lessons that take you to the point where you find your mistakes before you run anything. Every piece of code and every tsc output shown was produced by actually running it.

Start from lesson 1 Unlock every course

Curriculum

The 50 lessons are grouped into seven chapters. Working through them in order is the best way, but you are welcome to dip into whatever interests you. Note: the in-page editor simply strips the types and runs the result, so real type errors are shown as tsc output instead.

Chapter 1 — Starting with TypeScript (lessons 1–6)

You get a feel for what TypeScript takes off your hands by writing the same logic side by side with JavaScript. Setting up, tsconfig.json, type annotations and inference, and how to get by without any.

What TypeScript is

Writing the same logic in JavaScript and TypeScript side by side. Types are information that tells you about mistakes before you run, and nothing remains of them at runtime.

Free

Setting up and your first run

Installing TypeScript with npm, running it with node and type-checking it with tsc. Learn the two tools by their separate jobs.

Free

tsconfig.json basics

Confirming what strict switches on all at once, by comparing the output with it off. Including target and rootDir/outDir.

Free

The basics of type annotations

There are three places a colon goes: variables, parameters and return values. How to read TS2322, and the fact that null is a separate type.

Type inference

The type follows from the value you assign. const and let give different results, and only the parameters of a function declaration are never inferred.

any, unknown, never and void

What to write where you do not know the type. any spreads a lie into whatever you assign it to; unknown forces you to check.

Chapter 2 — Composing types (lessons 7–16)

Arrays, objects, union and intersection types, and naming types with type and interface. You go far enough to narrow a union type, which otherwise only lets you use what its members have in common.

Arrays and tuples

number[] and Array<number> mean the same thing. Tuples fix a type per position, and how far readonly protects you.

Object types and structural typing

Writing out property names and their types. Structural typing accepts any matching shape, and excess property checks only fire on object literals.

Type aliases (type)

Naming a type with type so you can reuse it. It works on more than objects, but it cannot be used as a value.

Choosing between interface and type

Either can describe an object type. Declaration merging is interface-only, and some types can only be written with type.

Optional properties and readonly

A ? makes a property omittable, but brings undefined with it. readonly protects one level and no further.

Union types

A type joined with a pipe only lets you use what its members share. A tagged union with a discriminant turns state into a type.

Literal types and as const

Making a value itself a type. Why let and object properties widen to string, and how as const pins them.

Intersection types (&)

Extracting common properties and combining them. Mixing incompatible types gives you never.

Narrowing

Confirming what something is right now with typeof, in and instanceof. Including the situations where narrowing is lost.

enum versus union types

An enum emits code when compiled, so node file.ts will not run it. Comparing it against as const and a union type.

Chapter 3 — Functions and types (lessons 17–23)

Parameters and return values, callbacks and overloads — a full pass over the types around functions. Type guard and assertion functions make your own checks narrow types too.

Type annotations on functions

The position is the same however you write the function. Annotating the return type makes the error appear where the cause is.

Optional, default and rest parameters

Three ways to make a parameter omittable. Reaching for a default parameter first cuts down on undefined checks.

Function types and typing callbacks

How to read (value: number) => string. Why you need not annotate the parameters where the type is already given.

Function overloads

Only for when the parameter type and the return type correspond. The implementation signature cannot be called from outside.

Type guard functions

Write value is string and narrowing still works when the check lives in a function. But the body itself is not verified.

Assertion functions

asserts value is T declares that from here on it is guaranteed. When to use one instead of a branching type guard.

Exhaustiveness checking with never

Cover every case and what remains is never. Add an option and the name you forgot shows up as an error.

Chapter 4 — Generics (lessons 24–30)

You write functions that take a type the way they take an argument and hand that same type back. Combining keyof, typeof and indexed access types, you finish by building a type-safe storage helper.

Generics basics

Taking a type the way you take an argument. Expressing in the type system the relationship any destroys: what you passed in comes back out.

Generic constraints

extends demands that a type has at least this much. It loses none of the other type information.

The keyof operator

Building a union of property names. keyof typeof makes the type follow the value definition automatically.

The typeof operator (in type position)

Its meaning depends on where you write it. typeof is the only door from the world of values into the world of types.

Indexed access types

Extracting a property's type with T["key"]. Use part of a large type and stop duplicating it by hand.

Multiple and default type parameters

Writing a function whose type changes between input and output. Supply all the type arguments or none. NoInfer stops inference spreading.

[Project] Build a type-safe storage helper

Writing the schema type in one place and pairing keys with values through keyof and T[K]. Replacing the as on JSON.parse with a type guard.

Chapter 5 — Classes and type declarations (lessons 31–36)

Property declarations, access modifiers, inheritance and implements — the types around classes. Then .d.ts files and @types, for using untyped JavaScript safely.

Class basics and their types

Declare properties together with their types. What TS2564 means, and the difference between a class name and typeof that class name.

Access modifiers and #private

private is a restriction in the type system; # is enforced at runtime too. Whether it appears in JSON.stringify shows you which is which.

Inheritance and abstract classes

abstract separates what is shared from what differs. override stops a misspelling.

Implementing an interface with implements

Not a condition for assignment, but a declaration that catches a missing member at the class definition. It does not supply types for you.

static, getters and setters

Members that belong to the class, and accessors you read and write like properties. Inside a static, this is the class itself.

Declaration files and @types

Three ways to deal with a TS7016. A .d.ts contains types only and creates no values.

Chapter 6 — Utility types and type operations (lessons 37–44)

You use the built-in types — Partial, Pick, Omit, Record — to derive purpose-built types from a single source type. The second half is how they are made: mapped types, conditional types, infer and satisfies.

Partial, Required and Readonly

Applying the modifiers you wrote by hand in lesson 11 all at once. They reach one level deep only.

Pick and Omit

Deriving purpose-built types from one source type. Watch out: Omit happily accepts a key that does not exist.

Record and dictionary types

A dictionary whose keys are limited to a union of literals, so a missing entry is a type error. And the danger of Record<string, T>.

ReturnType, Parameters and Awaited

Extracting types from a function you already have, so a wrapper need not copy out its parameter types.

Mapped types

Building a new type by walking over the keys. This is the notation the utility types are written in.

Conditional types

T extends U ? A : B. Applied to a union, it is distributed over each member.

infer and template literal types

Extracting a type by matching a pattern, and composing string types. The doorway to type-level programming.

The satisfies operator

Confirming that a value satisfies a type while keeping the more specific inferred type. The difference from as is whether anything is checked.

Chapter 7 — Putting it into practice (lessons 45–50)

Modules, async code, validating fetch responses, error handling and the DOM. You finish by assembling a to-do app and seeing what happens when you change a single word in a type definition.

Modules and import type

Import only the types and the module is never loaded at runtime. How .ts extensions are handled varies with your setup.

Typing async code

An async function always returns Promise<T>. A forgotten await shows up as a type error.

Typing a fetch response

Values arriving from outside are not guaranteed by any type. Validate once at the boundary, then trust them.

unknown in catch, and error handling

JavaScript lets you throw anything. That is why the catch variable is unknown, and you check before using it.

Typing DOM code and null checks

"It might be null" and "I do not know what kind of element this is" are separate problems. instanceof solves both at once.

[Project] Build a to-do app around its types

Gathering the types into one place. Add a single word to the state and every place that needs fixing appears as an error.

Once you have finished all 50 lessons, move on to the framework side with Next.js. Membership unlocks every course.