Рефакторинг выпадающих списков: от enum к конфигу-константе

Значимый прорыв формирует отрасль ИИ: maximbode 28 минут назад Рефакторинг выпадающих списков: от enum к конфигу-константе Средний 7 мин 762 Веб-разработка * Проектирование и рефакторинг * TypeScript * Туториал Из песочницы Выпадающий список — это ui-компонент, без которого редко обходится сайт. В этой статье я расскажу про то, как принял решение отказаться от enum для рендеринга выпадающих списков и перешел к конфигу-константе, и почему результат мне понравился. Для удобства далее буду называть enum по-русски — энумы.

Для чего используется enumЭнумы (“перечисление”, сокращение от enumerable) — это тип данных в TypeScript, который представляет собой набор фиксированных, именованных констант. Он используется для создания ограниченного списка значений (например, дней недели, статусов заказа или ролей пользователей) вместо использования случайных чисел или строк. Часто энумы используются при описании типов данных, приходящих с бэкенда.

Технические детали

Например:export const enum Распространенной практикой является писать ключи и значения энумов в SCREAMING_SNAKE_CASE, так как они являются литеральными константами. Энумы можно объявить через enum и const enum. Второй вариант часто является предпочтительным, так как обычный энум компилируется в JavaScript-объект, а const enum полностью удаляется при компиляции, подставляя значения напрямую в код.

const enum имеет смысл использовать, если не планируется обращение к ключу через значение (в описываемом сценарии это обычно это не нужно). Использование энумов для выпадающих списковЧастый пример использования энумов – для создания выпадающих списков, когда значения берутся из слоя API. Для отображения выпадающего списка требуется массив объектов с полями value и label (они могут называться чуть по-другому в зависимости от проекта или используемой библиотеки).

value — это значение энума, label — текст, который будет отображаться в выпадающем списке. const organizationTypeOptions: DropdownOption = [ { value: OrganizationType. FACTORY, label: 'Фабрика' }, { value: OrganizationType.

Отраслевые последствия

OFFICE, label: 'Офис' }, ] as const;Далее этот массив передается в компонент, монтирующий выпадающий список. Проблемы использования энумов для выпадающих списковКогда я разрабатывал свой текущий проект, часто писал код, показанный выше. Энумы объявлялись в слое, описывающем API бэкенда, затем импортировались в компоненты приложения.

В компонентах объявлялись объекты, хранящие value и label для отображения списков. Это работало, но с появлением большого количества списков стали заметны три проблемы. Во-первых, иногда выпадающий список, основанный на энумах, нужно было переиспользовать в новом компоненте.

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

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