keyof, Indexed Access and Mapped Types

Every utility type you met in chapter 13 is built from three operators that inspect and generate object types. Chapter 14 of this 24-chapter series covers exactly those: keyof T for asking a type for its keys, T['field'] for reading a property's type back out, and mapped types for looping over every key — the machinery behind Partial, Pick and Record.

keyof: the keys as a union

Where Object.keys() gives you the keys of a value, keyof gives you the keys of a type, delivered as a union of string literals. That union is then an ordinary type, so it works anywhere a union works — annotations, generic constraints, switch narrowing and the utilities from the last chapter.

interface Course {
  id: string;
  title: string;
  minutes: number;
}

type CourseKey = keyof Course;   // 'id' | 'title' | 'minutes'

const sortField: CourseKey = 'title';  // ok
const typo: CourseKey = 'titel';       // compile error

Expected output: CourseKey resolves to 'id' | 'title' | 'minutes', and the typo fails with error TS2322: Type '"titel"' is not assignable to type 'keyof Course'.

Two rules appear often enough to memorise. keyof of a union is the intersection of the member keys — only keys every member shares. And keyof any is string | number | symbol, the widest key set, which is why generic helpers usually constrain with K extends keyof T instead of string. Interfaces themselves are covered by Interfaces and Type Aliases; here the interface is only the raw material.

Indexed access: reading a property's type

The square-bracket operator works in the type world too: Course['id'] is the type of whatever lives under id. Index one key for a single type, index keyof Course for the union of all value types, and inside a generic function index a type parameter with its key parameter.

type IdType = Course['id'];          // string
type MinutesType = Course['minutes']; // number
type AnyValue = Course[keyof Course]; // string | number

function get<T, K extends keyof T>(row: T, key: K): T[K] {
  return row[key];
}

declare const course: Course;
const minutes = get(course, 'minutes'); // number
get(course, 'titel');                   // compile error

type Broken<T, K> = T[K];               // no constraint on K

Expected output: IdType is string, MinutesType is number, AnyValue is string | number, minutes is number, and the two mistakes are reported as error TS2345: Argument of type '"titel"' is not assignable to parameter of type '"id" | "title" | "minutes"'. and error TS2536: Type 'K' cannot be used to index type 'T'.

That get helper is the payoff: the argument type K and the return type T[K] are bound together, so a bad key and a bad read are the same mistake, caught in one place. Without extends keyof T the compiler cannot know which keys exist — hence the TS2536 error on Broken.

Mapped types: a loop over keys

A mapped type generates one property per key of another type. The syntax { [P in Keys]: Value } reads like for (const P of Keys): choose the key universe, then say what each property looks like.

type MyPartial<T> = { [P in keyof T]?: T[P] };
type MyPick<T, K extends keyof T> = { [P in K]: T[P] };
type MyRecord<K extends string, V> = { [P in K]: V };

// TypeScript's own definitions, for reference:
// type Partial<T>  = { [P in keyof T]?: T[P] };
// type Pick<T, K>  = { [P in K]: T[P] };
// type Record<K, V> = { [P in K]: V };

Expected output: no runtime output — these are type-level functions. MyPartial<{ readonly id: string }> resolves to { readonly id?: string | undefined }: note that readonly survived, because a mapped type written over keyof T is homomorphic — it iterates an existing object type, so TypeScript copies each property's modifiers across.

Record<K, V> really is a mapped type; its entire definition is { [P in K]: V }. The difference is the key universe: MyRecord maps over keyof T (an object type, so modifiers carry over) while Record<'a' | 'b', V> maps over a plain union and knows nothing about any object — that is why Record<keyof T, V> quietly throws away your ? and readonly modifiers.

Modifiers: +, -, readonly and ?

Homomorphic mapped types let you rewrite modifiers explicitly. readonly sits before the [P in…] clause; the optional marker ? sits after it. Prefix a modifier with - to remove it, with + to add it (and + is simply the default).

interface Sample {
  readonly id?: string;
  label: string;
}

type Mutable<T> = { -readonly [P in keyof T]: T[P] };
type RequiredFields<T> = { [P in keyof T]-?: T[P] };
type FrozenOptional<T> = { +readonly [P in keyof T]+?: T[P] };

type M1 = Mutable<Sample>;
type M2 = RequiredFields<Sample>;
type M3 = FrozenOptional<Sample>;

Expected output: M1 is { id?: string | undefined; label: string } (readonly removed), M2 is { readonly id: string; label: string } (optional removed, readonly kept) and M3 is { readonly id?: string | undefined; readonly label?: string | undefined }.

Rewrite that in your head as four operations — add or remove readonly, add or remove ? — and you can build Partial, Required and Readonly yourself from memory. Chapter 13's Required, for instance, is exactly M2.

Template literal types and key remapping

TypeScript can build string types out of pieces with backticks, and it can remap a mapped type's keys with an as clause. Put the two together and you can derive key names instead of repeating them.

type ClickEvents = 'click' | 'dblclick' | 'focus';

type OnHandlers = {
  [E in ClickEvents as `on${Capitalize<E>}`]: () => void;
};

const handlers: OnHandlers = {
  onClick: () => console.log('clicked'),
  onDblclick: () => console.log('double'),
  onFocus: () => console.log('focus'),
};

console.log(Object.keys(handlers).join(', '));

Expected output: keyof OnHandlers is 'onClick' | 'onDblclick' | 'onFocus', and the log prints onClick, onDblclick, onFocus.

Capitalize<'click'> is 'Click' — capitalisation touches only the first character, while Lowercase and Uppercase act on the whole string. Remapping can also filter: map an unwanted key to never and it disappears from the result.

Worked example: CamelCase keys

APIs often hand you snake_case fields while your UI wants camelCase. A recursive template literal type splits each key on underscores, and one mapped type rewrites every key in an interface.

type SnakeToCamel<S extends string> =
  S extends `${infer Head}_${infer Tail}`
    ? `${Lowercase<Head>}${Capitalize<SnakeToCamel<Tail>>}`
    : S;

type CamelCased<T> = {
  [K in keyof T as SnakeToCamel<K & string>]: T[K];
};

interface ApiUser {
  user_id: number;
  display_name: string;
  created_at: string;
}

type UiUser = CamelCased<ApiUser>;

const raw: ApiUser = { user_id: 7, display_name: 'Ada', created_at: '2026-01-05' };
const ui: UiUser = { userId: 7, displayName: 'Ada', createdAt: '2026-01-05' };

console.log(ui.displayName, ui.userId, raw.user_id);

Expected output:

UiUser = { userId: number; displayName: string; createdAt: string }
Ada 7 7

Read SnakeToCamel slowly: match `Head_Tail`, lowercase the head, then recurse on the tail so first_name_x becomes firstNameX. One warning about remapping in general — if two source keys map to the same output key, TypeScript merges their property types instead of raising an error, and the merged result is almost never what you meant. Check your remapped keys with keyof after a rename.

Common mistakes

• Indexing without a constraint — T[K] where K is free fails with TS2536; declare K extends keyof T so the compiler knows the key universe.
• Expecting mapped types to drop modifiers — a homomorphic map over keyof T copies ? and readonly; you must say -readonly or -? to remove them.
• Trying to rename keys without as — { [P in keyof T]: Something } keeps every original name; only a key remapping clause as NewName changes them.
• Reaching for Record<keyof T, V> to transform a type — it overwrites every value type with V and erases optionality; a mapped type over keyof T that reads T[P] preserves the shape.
• Assuming Capitalize title-cases a whole string — it changes one character; pair it with Lowercase (which does affect the whole string) when building camelCase keys.

Practice checklist

1. Write a get helper typed <T, K extends keyof T>(row: T, key: K): T[K] and prove a wrong key is rejected.
2. Derive keyof Course and Course[keyof Course] for your own interface; hover to confirm the union types.
3. Rebuild Partial<T> and Required<T> from scratch with mapped types and compare them with the built-ins.
4. Create an on* handler object for three event names using template literal keys, then add a fourth.
5. Run the CamelCased transformation over an interface containing first_name and is_active, and check both resolved keys.

What's next?

Mapped types loop over keys; the next chapter introduces types that branch. See how T extends U ? X : Y and the infer keyword power the standard library in Conditional Types and infer.