TS. Маппинг

🧱 Суть

Маппинг (от англ. mapping – отображение, сопоставление) – это создание связи между ключами и значениями.

Проще: есть ключ → ему соответствует набор допустимых значений

📦 Проблема

1. Дублирование типов вручную

type InputVariant = 
  'default' | 'ghost' | 'custom';

Если позже добавить новый вариант:

input: {
  default: {},
  ghost: {},
  custom: {},
  fancy: {}
}

нужно вручную обновлять тип.

2. Типы могут расходиться с реальными данными

Объект может измениться, а типы останутся старыми.
В итоге TypeScript больше не отражает реальное состояние кода.

✅ Решение

Получать типы напрямую из объекта через:

typeof
keyof

💻 Код

Объект вариантов:

const variants = {
  button: {
    primary: {},
    secondary: {},
    ghost: {},
  },
 
  input: {
    default: {},
    outlined: {},
  }
};

Получение ключей объекта:

type InputVariant = keyof typeof variants.input;

Результат:

'default' | 'outlined'

Как работает преобразование

variants.input

↓

typeof variants.input

получаем тип объекта:

{
  default: {};
  outlined: {};
}

↓

keyof typeof variants.input

получаем ключи:

'default' | 'outlined'

Пример VariantMap

type VariantMap = {
  button: keyof typeof variants.button;
  input: keyof typeof variants.input;
};

Теперь:

VariantMap['button']

равно:

'primary' | 'secondary' | 'ghost'

Проверка типов

const variants = {
  input: {
    default: {},
    ghost: {},
    custom: {},
  }
};
 
type InputVariant = keyof typeof variants.input;
 
const a: InputVariant = 'ghost';  // ✅
const b: InputVariant = 'banana'; // ❌

🎯 Вывод

маппинг = связь ключей и значений
keyof typeof позволяет строить типы из объектов
типы автоматически синхронизируются с данными
не нужно вручную обновлять union-типы
это один из самых частых приёмов TypeScript

LETUNOFF DOCS

Навигация