Mapped Types & Template Literal Types

Also Known As

TL;DR

Explanation

Mapped types: { [K in keyof T]: NewType } — iterate over all keys of T and transform their value types. Used to build Partial, Readonly, Required, and Record. Modifiers: +/- to add/remove optional (?) and readonly. Template literal types: `${Prefix}${string}` — create string union types by combining other string types. Applications: EventName as `on${Capitalize<Event>}`, getter names as `get${Capitalize<K>}`, CSS property names. Combined: transform an object type's method names into event handler names automatically.

Common Misconception

Why It Matters

Common Mistakes

• Forgetting -? to remove optionality in mapped types — Required<T> needs -? modifier.
• Not using as clause for key remapping — available in TS 4.1+ for key transformation.
• Template literal types on non-string unions — only string literal unions work.
• Over-engineering with complex mapped types when a simpler type works.

Code Examples

// Manually maintained parallel types — drift risk:
type User = { name: string; email: string; age: number; };
// Must update this manually every time User changes:
type UserGetters = {
    getName: () => string;
    getEmail: () => string;
    getAge: () => number;
};

// Mapped type derives UserGetters automatically:
type User = { name: string; email: string; age: number; };

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

type UserGetters = Getters<User>;
// Equivalent to:
// { getName: () => string; getEmail: () => string; getAge: () => number; }

// Template literal type for event names:
type EventName = 'click' | 'focus' | 'blur';
type Handler = `on${Capitalize<EventName>}`;  // 'onClick' | 'onFocus' | 'onBlur'

References

• ↗ https://www.typescriptlang.org/docs/handbook/2/mapped-types.html

Tags

Related Terms