Mapped and conditional types

Utility types such as Partial and ReturnType are not built into the compiler; they are written with the two features in this lesson.

Mapped types

A mapped type walks the keys of another type and produces a new property for each one:

type Partial<T>  = { [K in keyof T]?: T[K] };
type Readonly<T> = { readonly [K in keyof T]: T[K] };
type Required<T> = { [K in keyof T]-?: T[K] };    // -? removes optionality

The value side can be anything computed from K and T[K]. Here every field of a form becomes a boolean, "was it filled in?":

1// For every key of T, a boolean: was that field filled in?2type Filled<T> = { [K in keyof T]-?: boolean };3 4function filled<T extends object>(form: T): Filled<T> {5  const out = {} as Record<string, boolean>;6  for (const [key, value] of Object.entries(form)) {7    out[key] = value !== null && value !== undefined && value !== "";8  }9  return out as Filled<T>;10}11 12interface SignUp {13  email: string;14  name: string | null;15  company?: string;16}17 18export function run(): Filled<SignUp> {19  const form: SignUp = { email: "nino@example.com", name: null, company: "" };20  return filled(form);21}

The type only describes the result. The function still has to build it, and nothing checks that the loop and the type agree — which is why a mapped type almost always comes with a cast (as Filled<T>) at the end of its implementation.

Renaming keys

An as clause inside a mapped type remaps each key, usually with a template literal type. Capitalize is one of the built-in string helpers, along with Uppercase, Lowercase and Uncapitalize:

1// Key remapping: "name" becomes "getName", and each value becomes a function.2type Getters<T> = {3  [K in keyof T & string as `get${Capitalize<K>}`]: () => T[K];4};5 6function getters<T extends object>(obj: T): Getters<T> {7  const out: Record<string, () => unknown> = {};8  for (const key of Object.keys(obj) as (keyof T & string)[]) {9    out[`get${key[0]!.toUpperCase()}${key.slice(1)}`] = () => obj[key];10  }11  return out as Getters<T>;12}13 14export function run(): unknown[] {15  const g = getters({ name: "Nino", age: 31 });16  // g.getName(): string and g.getAge(): number, both known to the compiler.17  return [Object.keys(g), g.getName(), g.getAge()];18}

Remapping a key to never drops it, which is how you filter properties by their type.

Conditional types

T extends U ? X : Y picks X when T is assignable to U, otherwise Y. Inside the true branch, infer names a piece of the matched type so you can use it:

type ElementOf<T> = T extends readonly (infer E)[] ? E : T;
type A = ElementOf<string[]>;   // string
type B = ElementOf<number>;     // number

When T is a bare type parameter and you pass a union, the condition is applied to each member separately and the results are unioned: ElementOf<string[] | number> is string | number. That is called distribution. Wrapping both sides in a tuple, [T] extends [U], turns it off.

Again, the type and the code are two halves of one idea — the runtime check asks the same question the type does:

1// A conditional type picks a branch; infer names a piece of the matched type.2type ElementOf<T> = T extends readonly (infer E)[] ? E : T;3 4// The runtime check mirrors the type: same question, same two branches.5function firstOrSelf<T>(value: T): ElementOf<T> | undefined {6  return (Array.isArray(value) ? value[0] : value) as ElementOf<T> | undefined;7}8 9export function run(): unknown[] {10  const n = firstOrSelf([3, 4, 5]);     // number | undefined11  const s = firstOrSelf("solo");        // string | undefined12  const none = firstOrSelf([] as string[]);13  return [n, s, String(none)];14}

Common mistakes

• Forgetting the implementation is unchecked. A mapped return type with an as cast compiles even if the loop builds something else; test the function, not just the type.
• Surprise distribution. With type IsString<T> = T extends string ? true : false, IsString<string | number> gives boolean (true for one member, false for the other), not false. Use [T] extends [string] when you mean the union as a whole.
• keyof T including numbers and symbols. In a template literal, restrict to string keys with keyof T & string, as the getters example does.
• Unreadable type gymnastics. A recursive conditional type nobody can read is a maintenance cost; reach for it when it removes real duplication.

What interviewers ask

• How is Partial<T> implemented? { [K in keyof T]?: T[K] } — a mapped type over the keys with the optional modifier.
• What does infer do? Inside a conditional type's extends clause it declares a type variable bound to whatever matched at that position, as in ReturnType.