Mapped, Conditional & Template Literal Types in TypeScript
From the TypeScript cheat sheet · Advanced Types · verified Jul 2026
Mapped, Conditional & Template Literal Types
Transform and construct types programmatically
typescript
// Mapped type
type Optional<T> = { [K in keyof T]?: T[K] };
// Conditional type
type IsString<T> = T extends string ? true : false;
// Template literal type
type EventName = `on${Capitalize<"click" | "focus">}`;
// "onClick" | "onFocus"💡 Mapped types are how Partial, Required, Readonly, and Record are built internally
⚡ Template literal types generate union combinations — perfect for CSS class builders
📌 infer extracts a type variable inside conditional types — powers ReturnType, Awaited, etc.
🟢 Key remapping with "as" + Capitalize builds getters, setters, and event handlers from shapes