Решение ошибки: index signature в TypeScript и enum в ключе

Быстрый ответ

Для устранения проблемы "индексная подпись не может быть объединением" используйте отображаемый (mapped) тип. Определите тип, в котором каждый ключ из объединения преобразуется в тип значения:

type KeyUnion = 'foo' | 'bar';
type MappedType = { [K in KeyUnion]: any };
// `MappedType` обеспечивает безопасность при обращении по индексу

Такой подход формирует тип с индивидуально заданными свойствами для каждого ключа из объединения, обходя ограничение на уровне типизации.

Реализация индексной подписи с использованием перечислений

Когда вы работаете с перечислениями и вам нужно создать индексные подписи, отображаемый тип станет элегантным решением:

enum EmployeeRole {
  Admin = 'admin',
  User = 'user',
  Guest = 'guest' // Здесь, чтобы насладиться глотком кофе ☕
}

type RolePermissions = { [K in EmployeeRole]: string[] };
// Таким образом мы получаем чёткую таблицу разрешений для каждой роли. Намного лучше, не так ли? 🎩

Оператор in в данном контексте позволяет итерировать ключи перечисления и избежать ошибки с объединением типов. Кроме того, можно использовать утилитный тип Record для создания типов с индексацией по значениям перечисления:

type UserAccess = Record<EmployeeRole, string[]>;

Обращение с необязательными свойствами становится проще

Если требуется работать с типом, в котором не все ключи объединения являются обязательными, воспользуйтесь типом PartialRecord, чтобы упростить задачу:

type PartialRecord<K extends keyof any, T> = { [P in K]?: T };
type EasierPermissions = PartialRecord<EmployeeRole, string[]>;
// Теперь каждое свойство является опциональным, что даёт больше свободы для действий 🕺

Этот подход позволяет определить тип, в котором все свойства являются необязательными, обеспечивая необходимую гибкость.

Псевдонимы типов заменяют использование интерфейсов

Даже хотя интерфейсы важны при описании структур объектов, псевдонимы типов предлагают больше мощности и гибкости при работе с отображаемыми типами:

// Используйте мощь псевдонимов типов для формирования сложных структур
type IntricatePermission = {
  [K in EmployeeRole as `can${Capitalize<K>}`]: boolean // И мы можем это сделать! 💪
};

Псевдонимы типов позволяют менять и расширять ключи свойств, используя такие инструменты, как шаблонные строковые типы.

Визуализация

Допустим, вам нужно подобрать пару туфель с уникальной возможностью подстраиваться под любой из нескольких размеров ноги в любой момент:

Размеры обуви (👞): [размер 8, размер 9, размер 10]
Подгонка (🦶): размер 8 ИЛИ размер 9 ИЛИ размер 10

К сожалению, туфли не могут быть мультиразмерными; нужен определённый размер, как в случае с отображаемыми объектами:

Идеальный размер обуви (👞🔧):
{ 'размер 8': '🦶', 'размер 9': '🦶', 'размер 10': '🦶' }
// Каждая пара строго соответствует определенному размеру. Больше не возникает путаницы!

Отображаемые объекты как бы упорядочивают обувные полки, где каждому размеру предназначена своя ячейка без стремления соответствовать нескольким размерам одновременно.

Сложные сценарии и передовые решения в отображении

Искусство изменения ключей с помощью отображаемых типов

Отображаемые типы позволяют не только отображать ключи, но также свободно их преобразовывать:

// Добавляем префикс 'can' для разрешений
type PrefixedPermissions = {
  [K in EmployeeRole as `can${Capitalize<K>}`]: boolean // Позвольте себе свободу действий! 🚀
};

Подробнее об этом расскажет наш спикер на видео

Управление сложными типами свойств с использованием условных типов

С помощью условных типов можно создавать детализированные и адаптивные определения типов:

type ConditionalPermissions<K extends keyof any> = {
  [P in K]: P extends 'admin' ? string[] : boolean // У администраторов более сложный набор прав, потому что они админы!
};

Управление разрастающимся набором ключей легко и непринуждённо

С ростом вашего приложения вы столкнётесь с увеличением количества ключей для обработки. Отображаемые типы предоставляют вам нужную гибкость:

type EnormousPermissionsSet<K extends string> = { [P in K]: boolean // Потому что логические значения менее проблематичны 😉
};

Практические примеры

Типобезопасный обработчик ответов API? Конечно!

Представьте, что вы работаете с API, который возвращает различные данные в зависимости от роли пользователя. Отображаемые типы помогут добиться типобезопасности:

type ServerResponse<T> = { data: T };

function manageResponse<T extends EmployeeRole>(role: T, response: ServerResponse<ResponsibilitiesByRole[T]>) {
  // В соответствии с ролью ответ обрабатывается аккуратно и без лишних хлопот. 🧘‍♂️ 
}

Функция manageResponse имеет строгую сигнатуру, обеспечивающую соответствие ответа структуре, определенной в ResponsibilitiesByRole.

Без проблем адаптируйтесь к изменениям структур данных

В постоянно меняющемся мире приложений структуры данных часто подвергаются изменениям. Отображаемые типы позволяют эффективно адаптироваться к этим изменениям:

enum UpdatedRoles {
  Manager = 'manager',
  // Роли продолжают добавляться...
}

type EnhancedPermissions = {
  [K in keyof typeof UpdatedRoles]: string[];
};
// Обновили перечисление `UpdatedRoles`, и всё функционирует идеально! ✔️

Готовы ли вы к новизне с отображаемыми типами? Безусловно!

С развитием TypeScript возможности для создания сложных типов расширяются. Ожидается, что вместе с этим развитием отображаемые типы предоставят еще больше инструментов, обогащая ваш код новыми возможностями.

Полезные материалы

1. TypeScript: Документация – Продвинутые типы — Подробное понимание Отображаемых типов в TypeScript, незаменимый инструмент для работы с ними.
2. Индексные подписи – TypeScript Deep Dive — Проницательный взгляд на Индексные подписи в TypeScript от Басарата.
3. typescript – Что такое тип Record? – Stack Overflow — Обсуждение на Stack Overflow, которое отлично объясняет тип Record, прекрасную альтернативу индексным подписям.
4. TypeScript: Руководство – Интерфейсы — Официальное руководство TypeScript описывает Индексируемые типы.
5. Условные типы в TypeScript – Artsy Engineering — Обзор преодоления ограничений объединения типов в TypeScript с помощью условных типов.
6. Быстрое исправление для 'объединения не могут использоваться в индексных подписях, используйте отображаемый тип объекта вместо этого' — Обсуждение данной проблемы на GitHub с рекомендациями и объяснениями ошибки, связанной с объединением типов в индексных подписях.