How can I efficiently extract a list of keys or numbers from an enum using TypeScript?

Question

How can I efficiently extract a list of keys or numbers from an enum using TypeScript?

Is there a simple method to extract only the keys from an enumerator without returning both keys and values? The Object.keys() function returned 6 keys (0-5) when I tried it, likely because iterating through the enum with forEach also retrieved the values. I want a straightforward way to extract just the keys without having to manipulate another list.

I plan to implement this in a React application

My enumerator:

enum ObservationType {
    Accomodation = 1,
    Addtional = 2,
    LandTransport = 3
}

Here is a code snippet that I attempted, which ended up displaying all six values:

{Object.keys(ObservationType).map((type) => <div>{type}</div>)}

typescript

Answer 1

Answer №1

Give this a shot:

Object.keys(enumObj).filter(key => isNaN(Number(key)))

This method works well for handling various types of enums, including Heterogeneous enums.

Answer 2

Give this a shot:

Object.keys(enumObj).filter(key => isNaN(Number(key)))

This method works well for handling various types of enums, including Heterogeneous enums.

Answer 3

Answer №2

According to the TypeScript enum documentation:

The generated code for an enum consists of an object that maintains both forward (name -> value) and reverse (value -> name) mappings. References to other enum members are always outputted as property accesses and never inlined.

It's important to note that reverse mapping is not created for string enum members.

This implies that using string enums may be advantageous, for example:

enum ObservationType {
  Accomodation = 'Acc',
  Addtional = 'Addt',
  LandTransport = 'LandT',
}

// Object.keys will only contain the three keys.

An alternative approach to address this issue would be to keep track of the mapped values in order to obtain reverse mappings just once. However, this requires assigning the numeric keys to the object first, which is not always guaranteed:

enum ObservationTypeNums {
  Accomodation,
  Addtional,
  LandTransport,
}

Object.keys(ObservationTypeNums).reduce((arr, key) => {
  if (!arr.includes(key)) {
    arr.push(ObservationTypeNums[key]);
  }
  return arr;
}, []);

// The array now contains only the string keys

Alternatively, you can filter out the numeric keys similar to how it has been done previously.

Answer 4

According to the TypeScript enum documentation:

The generated code for an enum consists of an object that maintains both forward (name -> value) and reverse (value -> name) mappings. References to other enum members are always outputted as property accesses and never inlined.

It's important to note that reverse mapping is not created for string enum members.

This implies that using string enums may be advantageous, for example:

enum ObservationType {
  Accomodation = 'Acc',
  Addtional = 'Addt',
  LandTransport = 'LandT',
}

// Object.keys will only contain the three keys.

An alternative approach to address this issue would be to keep track of the mapped values in order to obtain reverse mappings just once. However, this requires assigning the numeric keys to the object first, which is not always guaranteed:

enum ObservationTypeNums {
  Accomodation,
  Addtional,
  LandTransport,
}

Object.keys(ObservationTypeNums).reduce((arr, key) => {
  if (!arr.includes(key)) {
    arr.push(ObservationTypeNums[key]);
  }
  return arr;
}, []);

// The array now contains only the string keys

Alternatively, you can filter out the numeric keys similar to how it has been done previously.

Answer 5

Answer №3

Consider utilization of ts-enum-util (GitHub, npm):

import {$enum} from "ts-enum-util";

enum ObservationType {
    Accomodation = 1,
    Addtional = 2,
    LandTransport = 3
}

// type: ObservationType[]
// value: [1, 2, 3]
const values = $enum(ObservationType).getValues();

// type: ("Accomodation" | "Addtional" | "LandTransport")[]
// value: ["Accomodation", "Addtional", "LandTransport"]
const keys = $enum(ObservationType).getKeys();

// direct mapping of enum value/key pairs
const valueDivs = $enum(ObservationType).map(
    (value, key) => <div>{value}</div>
)

This library helps handle the numeric key reverse lookup entries in the runtime enum object, among other functionalities.

Answer 6

Consider utilization of ts-enum-util (GitHub, npm):

import {$enum} from "ts-enum-util";

enum ObservationType {
    Accomodation = 1,
    Addtional = 2,
    LandTransport = 3
}

// type: ObservationType[]
// value: [1, 2, 3]
const values = $enum(ObservationType).getValues();

// type: ("Accomodation" | "Addtional" | "LandTransport")[]
// value: ["Accomodation", "Addtional", "LandTransport"]
const keys = $enum(ObservationType).getKeys();

// direct mapping of enum value/key pairs
const valueDivs = $enum(ObservationType).map(
    (value, key) => <div>{value}</div>
)

This library helps handle the numeric key reverse lookup entries in the runtime enum object, among other functionalities.

Answer 7

Answer №4

What do you think of this solution?

Object.keys(ObservationType).filter(key => Number.isNaN(Number(key)))

Huge thank you to @basarat for inspiring this answer.

Answer 8

What do you think of this solution?

Object.keys(ObservationType).filter(key => Number.isNaN(Number(key)))

Huge thank you to @basarat for inspiring this answer.

Answer 9

Answer №5

I struggled to find a satisfactory solution to this problem.

It appears that the enum generates an Object in this manner:

{
  key0: 0,
  key1: 1,
  0: key0,
  1: key1
}

Here is my approach:

const observationTypes: string[] = Object.keys(ObservationType).filter((_, i) => ObservationType[i] !== undefined).map((_, i) => ObservationType[i]);

This results in an array of strings:

{
  0: "a",
  1: "b",
  2: "c",
  3: "d",
  4: "e",
  ...
}

You can easily adjust this code snippet to create a set of elements as described in your query.

Answer 10

I struggled to find a satisfactory solution to this problem.

It appears that the enum generates an Object in this manner:

{
  key0: 0,
  key1: 1,
  0: key0,
  1: key1
}

Here is my approach:

const observationTypes: string[] = Object.keys(ObservationType).filter((_, i) => ObservationType[i] !== undefined).map((_, i) => ObservationType[i]);

This results in an array of strings:

{
  0: "a",
  1: "b",
  2: "c",
  3: "d",
  4: "e",
  ...
}

You can easily adjust this code snippet to create a set of elements as described in your query.

Answer 11

Answer №6

If you are dealing with string enums (enums with string values), you can easily retrieve the keys and values using Object.keys(myEnum) and Object.values(myEnum).

For numeric enums, it is recommended to use these methods instead of relying on isNaN, as it may lead to unexpected results for certain keys:

/**
 * Retrieve the values for a numeric enum.
 */
export function enumValues(myEnum) {
    return Object.values(myEnum).filter((o) => typeof o == 'number');
}

/**
 * Retrieve the keys for a numeric enum.
 */
export function enumKeys(myEnum) {
    return Object.values(myEnum).filter((o) => typeof o == 'string');
}

Answer 12

If you are dealing with string enums (enums with string values), you can easily retrieve the keys and values using Object.keys(myEnum) and Object.values(myEnum).

For numeric enums, it is recommended to use these methods instead of relying on isNaN, as it may lead to unexpected results for certain keys:

/**
 * Retrieve the values for a numeric enum.
 */
export function enumValues(myEnum) {
    return Object.values(myEnum).filter((o) => typeof o == 'number');
}

/**
 * Retrieve the keys for a numeric enum.
 */
export function enumKeys(myEnum) {
    return Object.values(myEnum).filter((o) => typeof o == 'string');
}

Answer 13

Answer №7

The ObservationType object contains keys such as Accomodation, Additional, LandTransport, 1, 2, 3, and plays a crucial role in understanding the functionality of enums in TypeScript.

If you are interested in retrieving only the string names, you can easily achieve this using a basic filter:

{Object.keys(ObservationType)
  .filter(k => typeof key === 'string')
  .map((type) => <div>{type}</div>)}

Answer 14

The ObservationType object contains keys such as Accomodation, Additional, LandTransport, 1, 2, 3, and plays a crucial role in understanding the functionality of enums in TypeScript.

If you are interested in retrieving only the string names, you can easily achieve this using a basic filter:

{Object.keys(ObservationType)
  .filter(k => typeof key === 'string')
  .map((type) => <div>{type}</div>)}

Answer 15

Answer №8

To easily retrieve the values associated with the keys of an enum, you can utilize the following technique where ObservationType[key] will give you the value for each key as needed.

(Object.keys(ObservationType) as Array<keyof typeof ObservationType>).map((key, index) => {})

Answer 16

To easily retrieve the values associated with the keys of an enum, you can utilize the following technique where ObservationType[key] will give you the value for each key as needed.

(Object.keys(ObservationType) as Array<keyof typeof ObservationType>).map((key, index) => {})

How can I efficiently extract a list of keys or numbers from an enum using TypeScript?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

Determining the function return type by analyzing an array of functions

Using React-Bootstrap with TypeScript in your project

Issue encountered when attempting to deploy a node/express API with now.sh

Analyzing arrays and object key/value pairs based on a specific value in javascript

Refining Interface Properties by Eliminating Null Options

initiating nest start removes the json files in the dist directory

Creating personalized directives

Navigating in Angular is made easy with the Angular routing feature, which allows you to redirect

Learn the process of importing different types from a `.ts` file into a `.d.ts` file

Managing non-mandatory information in a structured domain representation: What's the best approach?

Ways to resolve: The JSX component does not contain any construction or call signatures

Error message: Deno package code encounters error due to the absence of 'window' definition

Unable to locate CSS/SCSS Code module in VSCode when using a relative path

The TypeScript interface is incorrectly extending another interface, causing a compatibility issue with the 'then' property types

Learn how to efficiently transfer row data or an array object to a component within Angular by utilizing the MatDialog feature

What is the reason for TypeScript's prioritization of arguments over assignment in generic inference?

The observed function remains untouched

Looking for a type that combines multiple options

Exporting items with a label in TypeScript/JavaScript

The comparison between StrictNullChecks and Union Types in terms of syntax usage