advanced35 minby DevFox

Mapped Types and Key Remapping

Transforming every property of a type at once: modifiers, adding and removing optionality, and remapping keys with as to build derived shapes.

TypeScript
Types

You need a type where every property of Photo is wrapped in a validation result. Writing it out means restating the field list a fourth time, and the fourth copy will drift from the first three.

Partial, Readonly and Record are all built from one construct that transforms every property of a type at once. By the end of this lesson you will write your own, rename keys while mapping, and combine mapping with the conditionals from the previous lesson — which is where most of the interesting types in real codebases come from.

Transforming every property

typescript

type Photo = { id: string; name: string; size: number };

type Nullable<T> = {
  [K in keyof T]: T[K] | null;
};

type A = Nullable<Photo>;
// { id: string | null; name: string | null; size: number | null }

[K in keyof T] iterates over the property names. T[K] is the type of that property. The body is what each becomes.

That is the whole mechanism, and the built-ins are one line each:

typescript

type Partial<T> = { [K in keyof T]?: T[K] };
type Required<T> = { [K in keyof T]-?: T[K] };
type Readonly<T> = { readonly [K in keyof T]: T[K] };
type Record<K extends PropertyKey, V> = { [P in K]: V };

The modifiers are the second thing to know. ? adds optionality, -? removes it, readonly adds immutability, and -readonly removes it:

typescript

type Mutable<T> = { -readonly [K in keyof T]: T[K] };

+ is allowed and implied, so +? and ? are the same.

Mapping does not have to start from keyof T. Any union of keys works:

typescript

type Flags<K extends string> = { [P in K]: boolean };

type A = Flags<"dryRun" | "verbose">;
// { dryRun: boolean; verbose: boolean }

Renaming keys

as inside the brackets remaps each key:

typescript

type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};

type A = Getters<Photo>;
// { getId: () => string; getName: () => string; getSize: () => number }

Two things are happening. The template literal builds a new name — covered properly in the next lesson — and Capitalize is one of four built-in string transformations (Uppercase, Lowercase, Capitalize, Uncapitalize).

string & K is there because keyof T can include number and symbol, and a template literal needs a string. That intersection narrows it.

Remapping to never removes the key, which is how you filter:

typescript

type OmitByType<T, V> = {
  [K in keyof T as T[K] extends V ? never : K]: T[K];
};

type A = OmitByType<Photo, number>;
// { id: string; name: string }

That is a conditional inside a key position — the two mechanisms from these two lessons doing one job. It is worth reading twice: for each key, if its value type is V, produce never as the key, which drops it.

Homomorphic mapping

There is a rule about which mapped types preserve modifiers, and it explains a real bug.

Bad — a mapping that silently discards readonly and ?.

Good — a direct mapping, which preserves them.

[K in keyof T] — homomorphic

readonly and ? come along.

A mapping of exactly this form copies the modifiers from the source unless you explicitly change them.

It also distributes over unions and preserves arrays and tuples, which is why Partial<string[]> behaves sensibly.

Anything else — not homomorphic

Modifiers are dropped.

Remap with as, or map over something that is not keyof T, and the property is lost.

The result looks like a no-op and quietly makes every optional field required and every readonly field mutable.

One `as K` between them, and it decides whether the mapping is a copy or a rebuild

The distribution, concretely:

Combining with conditionals

The pattern that produces most useful derived types: map to produce a union of keys, then index to collapse it.

Read it in two steps. The mapped type produces { id: "id"; name: "name"; size: never }. Indexing with [keyof T] takes the union of all its values — "id" | "name" | never — and never disappears.

The -? matters: an optional property makes its value type include undefined, which would fail the extends check for what is otherwise a matching key.

From that, a genuinely useful pair:

And a deep transformation, which needs recursion:

Arrays first, because an array is an object and the object branch would map its numeric indices and its methods. That ordering catches everyone once.

A practical set

Four that earn their place in most codebases:

Expand is the one to remember. A derived type displays as its expression — Partial<Omit<Photo, "id">> — and wrapping it forces the checker to compute the shape, so hovers and error messages show { name?: string; size?: number } instead.

Apply it at public boundaries, where the reader has not seen the definition.

A cheat sheet to keep

Where to go next

You can now transform every property of a type, rename or drop keys while doing it, and combine mapping with conditionals to derive types from other types. The homomorphic rule is the one to carry: a mapping that adds as loses readonly and ?, and nothing warns you.

Next is Template Literal Types, which you have just used without a proper introduction. Types built from string patterns turn out to make a class of string-based API checkable rather than merely documented.

Before you move on, write KeysMatching<T, V> yourself and use it to get the string keys of a type you have. Then remove the -? and see what changes when a property is optional. That detail is the difference between a helper that works and one that quietly misses fields.