Mapped Types, keyof, and Template Literal Types (Interview-Ready)

30‑second interview answer

keyof gives you the union of keys of a type. Mapped types iterate over keys to build new types (like Partial, Pick, Record). Template literal types let you construct string unions (like onClick, getUserId) and are great for typed event names and CSS variables. Together, they power many advanced TS patterns.

keyof

type User = { id: string; name: string; isAdmin: boolean };
 
type UserKey = keyof User; // 'id' | 'name' | 'isAdmin'

Mapped types

Build a Partial (how TS does it conceptually)

type MyPartial<T> = {
  [K in keyof T]?: T[K];
};

Pick a subset

type MyPick<T, K extends keyof T> = {
  [P in K]: T[P];
};

Readonly

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

Template literal types

type EventName = 'click' | 'focus';
 
type HandlerName = `on${Capitalize<EventName>}`;
// 'onClick' | 'onFocus'

Practical use: typed event map

type Events = {
  click: { x: number; y: number };
  focus: { elementId: string };
};
 
type EventKey = keyof Events;
 
type ListenerName = `on${Capitalize<string & EventKey>}`;

Common pitfalls

• keyof includes only keys, not values.
• Mapped types can accidentally create unions you didn’t expect (test with examples).
• Template literal types can get complex—keep them small and documented.

Mini Q&A

Q1: What is keyof used for?

• building safe APIs that depend on object keys.

Q2: What are mapped types?

• type-level loops over keys.

Q3: Where do template literal types help?

• typed string-based APIs: routes, event names, CSS variables.

Summary checklist

• I can explain keyof.
• I can write a mapped type.
• I can show a template literal type use case.