[Angular, TypeScript] Декларативная работа с перечисляемыми типами через Record: как не городить switch или вложенные if

Автор Сообщение
news_bot ®

Стаж: 6 лет 9 месяцев
Сообщений: 27286

Создавать темы news_bot ® написал(а)
19-Дек-2020 16:31

Практически в любом проекте есть некая жесткая структура данных с перечислением (а чаще всего не одна), на которую нужно навешивать некие расширения: иконки в зависимости от типа или статуса некой сущности, логика поведения итд. Рассмотрим как это делают новички, и как можно делать красиво, используя служебный класс Record
В императивном подходе чаще всего используют "любимые" всеми switch или каскады из if:
export type CarBodyType  = 'sedan' | 'universal' | 'minivan'
...
getCarBodyIcon(bodyType: CarBodyType): IconName {
  if (bodyType === 'sedan') return 'SEDAN_BODY'
  if (bodyType === 'universal') return 'UNIVERSAL_BODY'
  if (bodyType === 'minivan') return 'MINIVAN_BODY'
}
getCarBodyName(bodyType: CarBodyType) {
   switch (bodyType: CarBodyType) {
       case 'sedan': return 'Седан';
       case 'universal': return 'Универсал';
       case 'minivan': return 'Минивэн';
    }
}

То же самое в декларативном стиле:
export type TCarBody  = 'sedan' | 'universal' | 'minivan'
export interface ICarViewExtension { name: string, icon: IconName }
export const CAR_BODY_VIEW_RECORD: Record<TCarBody, ICarViewExtension> {
    sedan: { name: 'Седан', icon: 'SEDAN_BODY'},
    universal: { name: 'Универсал', icon: 'UNIVERSAL_BODY'},
    minivan: { name: 'Минивэн', icon: 'MINIVAN_BODY'},
}
...
getCarBodyIcon(bodyType: TCarBody): IconName {
  return CAR_BODY_VIEW_RECORD[bodyType].icon;
}
getCarBodyName(bodyType: TCarBody) {
   return CAR_BODY_VIEW_RECORD[bodyType].name;
}

Само собой, функции getCarBodyIcon и getCarBodyName тут для упрощения, лучше пользоваться пайпами.
Что мы получаем от использования рекордов?
  • WebStorm будет сразу давать подсказки, если мы, например, добавили новый тип кузова в TCarBody и забыли его прописать в рекорд. С if и switch такого не будет.
  • Код получается более читаемый, да и собственно кода получается меньше
  • Если вдруг захочется сделать типы кузова настраиваемыми на сервере где-нибудь в админке, и хронить иконки, названия, итд в базе данных, потребуется гораздо меньше правок. Так как логика гибкая, а источник истины — один, и он в виде структуры данных, которую можно передать в json и распарсить.

Как всегда жду мнение сообщества и приветствую конструктивную критику.
===========
Источник:
habr.com
===========

Похожие новости: Теги для поиска: #_angular, #_typescript, #_arhitektura (архитектура), #_angular, #_typescript
Профиль  ЛС 
Показать сообщения:     

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

Текущее время: 22-Ноя 15:25
Часовой пояс: UTC + 5