Как получить ключи из Enum в Typescript?

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

/**
 * Converts an enum into an array of objects with `id` and `key` properties.
 *
 * @param {T} arg - The enum object.
 * @returns {Array<{ id: number, key: T }>} - An array of objects with `id` and `key` properties.
 * @template T
 */
export function convertEnumToObjectCollection<T>(arg: T): EnumKeyValue<T>[] {
	const _arr = [];
	for (const n in arg) {
		if(typeof arg[n] === 'number') {
			_arr.push({id: arg[n], key: n});
		}
	}
	return [..._arr] as EnumKeyValue<T>[];
}

export interface EnumKeyValue<T> {
	id: number;
	key: T;
}

Разберемся с логикой

В основе convertEnumToObjectCollection лежит конвертация TypeScript перечислений (enums) в коллекции объектов, что облегчает работу с ними в различных сценариях. Давайте разберем ее функционал по шагам:

1. Обобщенный подход: Функция объявлена с обобщенным типом T, что позволяет ей принимать любой тип перечисления.
2. Итерация по перечислению: С помощью цикла for...in функция перебирает свойства входного перечисления (arg). Она проверяет каждое свойство, чтобы определить, является ли его значение числом, чтобы в итоговую коллекцию попали только числовые значения перечисления.
3. Создание коллекции объектов: Для каждого числового значения перечисления функция создает объект с двумя свойствами: id (значение перечисления) и key (ключ перечисления). Эти объекты добавляются в массив (_arr).
4. Утверждение типа: Наконец, функция возвращает копию массива _arr, обеспечивая правильное выведение типа для результирующего массива как EnumKeyValue<T>[].

Зачем нужно?

Теперь, когда мы поняли, как работает convertEnumToObjectCollection, давайте рассмотрим, почему это такая ценная утилита для разработчиков TypeScript:

1. Повышает безопасность типов: Используя систему типов TypeScript, convertEnumToObjectCollection поддерживает безопасность типов на протяжении всего процесса конвертации. Это гарантирует, что результирующая коллекция объектов сохраняет информацию о типе исходного перечисления, предотвращая потенциальные ошибки типов в будущем.
2. Универсальное применение: Результирующую коллекцию объектов можно использовать в различных сценариях, таких как генерация вариантов для выпадающего списка, сопоставление значений перечисления с элементами пользовательского интерфейса или выполнение поиска на основе ключей перечисления.

Пример использования:

enum Color {
  Red = 1,
  Green = 2,
  Blue = 3
}

const colorCollection = convertEnumToObjectCollection(Color);
console.log(colorCollection);
// Вывод: [{ id: 1, key: 'Red' }, { id: 2, key: 'Green' }, { id: 3, key: 'Blue' }]