Mapped Types
Advanced · 18 min read · ▶ live playground · ✦ checkpoint
Mapped types transform object types one property at a time. { [K in keyof T]: ... } is a type-level loop: take every key from T, call the current key K, and build a new property for that key.
Use mapped types when the keys should stay connected to an existing shape, but each property's optionality, readonly status, or value type needs to change.
The Type-Level Loop
Here is the smallest mapped type:
type Copy<T> = {
[K in keyof T]: T[K];
};Read it slowly: "for every key K in keyof T, create a property named K, whose value type is T[K]." Section 10 gave you both pieces. keyof T produces the key union, and T[K] reads the value type behind the current key.
Copy<T> is boring on purpose. It builds the same shape back. The power appears when you change the right side:
TextReport<Product> kept the keys id | name | price | inStock, but every value became string. No runtime loop ran. This is still the erased type layer building a new object type before the JavaScript runs.
Preserve Values With T[K]
Sometimes you do not want to replace every value with the same type. You want to wrap each original value type in a new shape. That is where T[K] matters: it lets each property remember its own original value type while the mapped type walks across the keys.
This pattern is common in forms, API adapters, and config layers: same keys, richer values. The mapped type is the connective tissue that keeps the derived shape synchronized with the source shape.
Modifiers Change Properties
Mapped types can also add or remove property modifiers while they walk.
type MakeOptional<T> = {
[K in keyof T]?: T[K];
};
type MakeRequired<T> = {
[K in keyof T]-?: T[K];
};
type MakeReadonly<T> = {
readonly [K in keyof T]: T[K];
};
type MakeWritable<T> = {
-readonly [K in keyof T]: T[K];
};The ? after the bracket makes every property optional. The -? removes optionality. readonly before the bracket makes every property readonly. -readonly removes readonly. You may also see +? or +readonly; the + means "add," but it is optional, so most code leaves it off.
You can combine removals in one pass:
Notice what changed and what did not. CompleteEditable<T> removed readonly and ?, but it did not invent new value types. id stayed string, email stayed string, and plan stayed "free" | "pro".
Rebuild Tiny Utilities
Section 12 turns the official utility types into a practical toolkit. Here, rebuild tiny teaching copies only to see the mapped-type mechanics.
Those three aliases are intentionally small:
MyPartial<T>copies every key and adds?.MyRequired<T>copies every key and removes?.MyReadonly<T>copies every key and addsreadonly.
In real projects, use the built-in Partial, Required, and Readonly instead of keeping these names around. This lesson owns the machinery; Section 12 owns the daily-use toolkit.
Mapped types walk keys and rebuild properties. Next lesson keeps the same walk, then adds key remapping with as, which can rename or filter the keys while the mapped type runs.
Checkpoint
Answer all three to mark this lesson complete