Typescript Преобразование Enum в постоянный класс

Как мне преобразовать Enum в постоянный класс, подобный этому, в Typescript? В настоящее время используется React Typescript с функциональными компонентами. Этот вопрос немного отличается: перечисление TypeScript в массив объектов

export enum ProductStatus {
  Draft = 1,
  Review = 2,
  Approved = 3,
  Rejected = 4,
  Billed = 5,
  Collected = 6,
  Unpayable = 7,
  WorkInProgress = 8,
  ReadyToReview = 9,
  NeedsRevision = 10,
  Failed = 11,
}

export const ProductStatus = {
  Draft: 1,
  Review: 2,
  Approved: 3,
  Rejected: 4,
  Billed: 5,
  Collected: 6,
  Unpayable: 7,
  WorkInProgress: 8,
  ReadyToReview: 9,
  NeedsRevision: 10,
  Failed: 11,
};
[LXI-SpartaCodingClub Full-Stack Bootcamp in Indonesia] 2023/1/21 TIL/Week 15]
[LXI-SpartaCodingClub Full-Stack Bootcamp in Indonesia] 2023/1/21 TIL/Week 15]
Я научился создавать карусель в ReactJS с помощью библиотеки Splide.
Краткое введение в Styled-компоненты
Краткое введение в Styled-компоненты
В настоящее время популярность Styled-компонентов становится все больше и больше. Большинство проектов, построенных на React.js, используют эту...
ДЕНЬ 8 | Страница обзора в React
ДЕНЬ 8 | Страница обзора в React
Сегодня я сделал страницу обзора с помощью react. Я использовал некоторые иконки из reacting icons и использовал генератор случайных чисел для...
Как настроить среду разработки React.
Как настроить среду разработки React.
весь процесс настройки среды разработки react.
Что вы должны знать о JSX - объяснение менее чем за 2 минуты
Что вы должны знать о JSX - объяснение менее чем за 2 минуты
React - это библиотека JavaScript для создания пользовательских интерфейсов.
Как использовать get bounds с react-leaflet и данными JSON
Как использовать get bounds с react-leaflet и данными JSON
Я считаю, что получить границы из библиотеки leaflet Js очень просто, но использование этой функции может быть немного сложным. Поэтому позвольте мне...
1
0
50
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Мы можем использовать Object.values, чтобы получить значения из enum и преобразовать их в объект, используя reduce.

const ProductStatusObject = Object.values(ProductStatus)
  .filter((v): v is keyof typeof ProductStatus => typeof v !== "number")
  .reduce((p, c) => {
    p[c] = ProductStatus[c]
    return p
  }, {} as Record<keyof typeof ProductStatus, number>)

ProductStatusObject
// ^? Record<"Draft" | "Review" | "Approved" | ..., number>

Как вы, возможно, знаете, перечисления содержат отображение в обоих направлениях. Нам нужно отфильтровать значения, которые не относятся к типу string, чтобы получить только ключи enum. Обратному вызову filter также нужен предикат типа, чтобы указать TypeScript, что результирующий массив содержит только значения типа keyof typeof ProductStatus.

Метод reduce берет элементы массива и назначает их в качестве ключей к объекту, используя соответствующее значение перечисления. Я набрал объект как Record<keyof typeof ProductStatus, number>, чтобы получить полезный тип возвращаемого значения.

console.log(ProductStatusObject)

/*
{
  "Draft": 1,
  "Review": 2,
  "Approved": 3,
  "Rejected": 4,
  "Billed": 5,
  "Collected": 6,
  "Unpayable": 7,
  "WorkInProgress": 8,
  "ReadyToReview": 9,
  "NeedsRevision": 10,
  "Failed": 11
} 
*/ 

Детская площадка

Или просто Object.fromEntries с Object.entries и фильтрацией по номерам: tsplay.dev/ND2b1W

vera. 18.11.2022 15:48
Ответ принят как подходящий

прокручивайте клавиши и используйте функцию reduce

  const newConst = React.useMemo(() => {
    return Object.keys(ProductStatus).reduce((acc, key) => {
      if (isNaN(Number(key))) {
        acc[key] = ProductStatus[key];
      }
      return acc;
    }, {});
  }, []);

  console.log(newConst );

https://stackblitz.com/edit/react-ts-ivfxqw?file=App.tsx

Другие вопросы по теме