Advanced TypeScript PatternsMapped Types and Template Literals

Mapped Types and Template Literals

Free preview

Transform types programmatically with mapped types.

~20 min read

Mapped Types and Template Literal Types

Mapped types

Transform every property of a type:

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

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

type Nullable<T> = {
  [K in keyof T]: T[K] | null;
};

Conditional mapped types

type NonNullableProps<T> = {
  [K in keyof T]: NonNullable<T[K]>;
};

Template literal types

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

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

Key remapping

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

interface User { name: string; age: number; }
type UserGetters = Getters<User>;
// { getName: () => string; getAge: () => number; }