[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-Ноя 21:21
Часовой пояс: UTC + 5