1. Concept library
  2. JavaScript & TypeScript
  3. Module 10: Utility and mapped types

Concept

Mapped types

A mapped type loops over the keys of another type to build a new one, such as making every property readonly or wrapping each in a Promise. It is how the utility types are written.

What a session covers

The tutor works through these with you, in conversation and code. A session ends when you have shown them, not when a video does.

  1. Explain how a mapped type loops over the keys of another type
  2. Write a mapped type that makes every property readonly or optional
  3. Read the definition of a built-in utility type and explain it

In practice

A few lines that show Mapped types doing its job.

TypeScript
type Readonlyish<T> = { readonly [K in keyof T]: T[K] };
type Async<T> = { [K in keyof T]: () => Promise<T[K]> };
type Flags<T> = { [K in keyof T as `has${Capitalize<string & K>}`]: boolean };

interface Settings { theme: string; volume: number }
type SettingsFlags = Flags<Settings>;   // { hasTheme: boolean; hasVolume: boolean }

The common mistake

Watch for

Writing a mapped type where a plain interface would be clearer. A mapped type earns its place when it tracks another type; for a fixed shape, write the shape.

What to know first

Your roadmap puts these before Mapped types, unless you already know them.

How it stays learned

Once a session shows you understand Mapped types, it comes back for review. Each review takes a minute and tells the memory model how well you still know it.

  1. Day 3First recall, while it is fresh
  2. Day 7Second, a week on
  3. Day 18Last, when it has settled

Where it leads

Topics that build on Mapped types.

Previous in the module← Partial, Pick and Omit
Next in the moduleConditional types →