Hack Frontend Community

Что такое Mapped Types в TypeScript

Mapped Types (отображённые типы) в TypeScript позволяют создавать новые типы на основе существующих, перебирая ключи и модифицируя их.

Это как map() для типов — можно обойти каждый ключ объекта и задать для него нужное значение.

Синтаксис

type NewType = {
  [Key in Union]: Type;
}
  • Key — имя переменной, представляющее текущий ключ из множества Union.
  • Type — тип значения для каждого ключа.
  • Можно использовать keyof, модификаторы (?, readonly), и utility types (Pick, Partial, и т.д.).

Примеры использования

Пример 1: Копия типа с другими значениями

type User = {
  name: string;
  age: number;
};

// Делаем тип, где все значения — boolean
type UserPermissions = {
  [K in keyof User]: boolean;
};

// => { name: boolean; age: boolean }

Пример 2: Все поля опциональные (аналог Partial<T>)

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

Использование

type User = { name: string; age: number };
type OptionalUser = Optional<User>;
// => { name?: string; age?: number }

Пример 3: Сделать все поля readonly (аналог Readonly<T>)

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

Пример 4: Убрать readonly

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

Где используются Mapped Types

  • При создании utility types (Partial, Pick, Readonly, Record и т.д.)
  • Для генерации динамических объектов с заранее известными ключами
  • Для автоматического преобразования типов на основе других типов
  • Для интроспекции типов на больших проектах (особенно с GraphQL, API, Form-системами)