Ways to retrieve the key of an enum based on its value within Typescript

Question

Ways to retrieve the key of an enum based on its value within Typescript

Here's an example of an enum:

export enum Colors {
    RED = "RED COLOR",
    BLUE = "BLUE COLOR",
    GREEN = "GREEN COLOR"
}

Can you help me figure out how to retrieve the enum key based on a specific value? For instance, if I input "BLUE COLOR", I should get back 'BLUE'.

Colors["BLUE COLOR"] triggers an error that says

Element implicitly has an 'any' type because expression of type '"BLUE COLOR"' can't be used to index type 'typeof Colors'. Property 'BLUE COLOR' does not exist on type 'typeof Colors'.

typescript enums

Answer 1

Answer №1

If you need to retrieve the enum key based on its value, you can modify your enum as shown below. This format should work in older versions as well.

For Basic JavaScript:

 enum Colors {
    RED = "RED COLOR",
    BLUE = "BLUE COLOR",
    GREEN = "GREEN COLOR"
}

For .tsx:

 enum Colors {
        RED = "RED COLOR" as any,
        BLUE = "BLUE COLOR" as any,
        GREEN = "GREEN COLOR" as any
    }

For TypeScript (.ts):

enum Colors {
  RED = <any>"RED COLOR",
  BLUE = <any>"BLUE COLOR",
  GREEN = <any>"GREEN COLOR"
}

You can then retrieve the key like this:

Retrieve enum key by value:

let enumKey = Colors["BLUE COLOR"];
    console.log(enumKey);

Output:

https://i.stack.imgur.com/M3b4n.gif

Another method to retrieve enum key by value:

let enumKey = Object.keys(Colors)[Object.values(Colors).indexOf("BLUE COLOR")];

console.log(enumKey);

Output:

https://i.stack.imgur.com/PZpu2.png

Check it out on jsfiddle:

View coding sample on jsfiddle

Note: A new announcement was made on August 25th with TypeScript 4.8. Please take note of it. Read more here.

Answer 2

If you need to retrieve the enum key based on its value, you can modify your enum as shown below. This format should work in older versions as well.

For Basic JavaScript:

 enum Colors {
    RED = "RED COLOR",
    BLUE = "BLUE COLOR",
    GREEN = "GREEN COLOR"
}

For .tsx:

 enum Colors {
        RED = "RED COLOR" as any,
        BLUE = "BLUE COLOR" as any,
        GREEN = "GREEN COLOR" as any
    }

For TypeScript (.ts):

enum Colors {
  RED = <any>"RED COLOR",
  BLUE = <any>"BLUE COLOR",
  GREEN = <any>"GREEN COLOR"
}

You can then retrieve the key like this:

Retrieve enum key by value:

let enumKey = Colors["BLUE COLOR"];
    console.log(enumKey);

Output:

https://i.stack.imgur.com/M3b4n.gif

Another method to retrieve enum key by value:

let enumKey = Object.keys(Colors)[Object.values(Colors).indexOf("BLUE COLOR")];

console.log(enumKey);

Output:

https://i.stack.imgur.com/PZpu2.png

Check it out on jsfiddle:

View coding sample on jsfiddle

Note: A new announcement was made on August 25th with TypeScript 4.8. Please take note of it. Read more here.

Answer 3

Answer №2

let findBlue = Object.keys(Styles)[Object.values(Styles).indexOf("BLUE STYLE")];

Explore this JSFiddle link for more details.

Answer 4

let findBlue = Object.keys(Styles)[Object.values(Styles).indexOf("BLUE STYLE")];

Explore this JSFiddle link for more details.

Answer 5

Answer №3

I have implemented the following function

export function getEnumKeyByEnumValue(myEnum: any, enumValue: number | string): string {
  let keys = Object.keys(myEnum).filter((x) => myEnum[x] == enumValue);
  return keys.length > 0 ? keys[0] : '';
}

Testing with jest

describe('enum', () => {
  enum TestEnumWithNumber {
    ZERO
  }

  enum TestEnumWithString {
    ZERO = 'ZERO'
  }

  it('should correctly retrieve key for enums with number values', function() {
    const key = getEnumKeyByEnumValue(TestEnumWithNumber, TestEnumWithNumber.ZERO);
    expect(key).toBe('ZERO');
  });

  it('should correctly retrieve key for enums with string values', function() {
    const key = getEnumKeyByEnumValue(TestEnumWithString, TestEnumWithString.ZERO);
    expect(key).toBe('ZERO');
  });

  it('should correctly retrieve key by providing corresponding string value', function() {
    const key = getEnumKeyByEnumValue(TestEnumWithString, 'ZERO');
    expect(key).toBe('ZERO');
  });
});

Sharing in case it benefits someone

Answer 6

I have implemented the following function

export function getEnumKeyByEnumValue(myEnum: any, enumValue: number | string): string {
  let keys = Object.keys(myEnum).filter((x) => myEnum[x] == enumValue);
  return keys.length > 0 ? keys[0] : '';
}

Testing with jest

describe('enum', () => {
  enum TestEnumWithNumber {
    ZERO
  }

  enum TestEnumWithString {
    ZERO = 'ZERO'
  }

  it('should correctly retrieve key for enums with number values', function() {
    const key = getEnumKeyByEnumValue(TestEnumWithNumber, TestEnumWithNumber.ZERO);
    expect(key).toBe('ZERO');
  });

  it('should correctly retrieve key for enums with string values', function() {
    const key = getEnumKeyByEnumValue(TestEnumWithString, TestEnumWithString.ZERO);
    expect(key).toBe('ZERO');
  });

  it('should correctly retrieve key by providing corresponding string value', function() {
    const key = getEnumKeyByEnumValue(TestEnumWithString, 'ZERO');
    expect(key).toBe('ZERO');
  });
});

Sharing in case it benefits someone

Answer 7

Answer №4

Enhanced version of getEnumKeyByEnumValue function without utilizing any:

export function retrieveEnumKeyByEnumValue<
  TEnumKey extends string,
  TEnumVal extends string | number
>(myEnum: { [key in TEnumKey]: TEnumVal }, enumValue: TEnumVal): string {
  const keys = (Object.keys(myEnum) as TEnumKey[]).filter(
    (x) => myEnum[x] === enumValue,
  );
  return keys.length > 0 ? keys[0] : '';
}

Answer 8

Enhanced version of getEnumKeyByEnumValue function without utilizing any:

export function retrieveEnumKeyByEnumValue<
  TEnumKey extends string,
  TEnumVal extends string | number
>(myEnum: { [key in TEnumKey]: TEnumVal }, enumValue: TEnumVal): string {
  const keys = (Object.keys(myEnum) as TEnumKey[]).filter(
    (x) => myEnum[x] === enumValue,
  );
  return keys.length > 0 ? keys[0] : '';
}

Answer 9

Answer №5

Give this a shot

enum Shades
{
   CRIMSON = "CRIMSON SHADE",
   INDIGO = "INDIGO SHADE",
   EMERALD = "EMERALD SHADE"
};   

 console.log(Object.keys(Shades)[Object.values(Shades).indexOf('INDIGO SHADE' as unknown as Shades)]);

Answer 10

Give this a shot

enum Shades
{
   CRIMSON = "CRIMSON SHADE",
   INDIGO = "INDIGO SHADE",
   EMERALD = "EMERALD SHADE"
};   

 console.log(Object.keys(Shades)[Object.values(Shades).indexOf('INDIGO SHADE' as unknown as Shades)]);

Answer 11

Answer №6

Enhanced getEnumKeyByEnumValue function with type validations:

enum Colors {
    RED = "RED COLOR",
    BLUE = "BLUE COLOR",
    GREEN = "GREEN COLOR"
}

type ValueOf<T> = T[keyof T];

function getEnumKeyByEnumValue<R extends (string | number), T extends {[key: string] : R}>(myEnum: T, enumValue: ValueOf<T>): string {
  let keys = Object.keys(myEnum).filter((x) => myEnum[x] == enumValue);
  return keys.length > 0 ? keys[0] : '';
}


let enumKey = getEnumKeyByEnumValue(Colors, Colors.RED);

// This line will result in an error: Argument of type '"OTHER COLOR"' is not assignable to parameter of type 'ValueOf<typeof Colors>'.
//let enumKey = getEnumKeyByEnumValue(Colors, "OTHER COLOR");

console.log(enumKey);

https://jsfiddle.net/2ry1u8qb/

Answer 12

Enhanced getEnumKeyByEnumValue function with type validations:

enum Colors {
    RED = "RED COLOR",
    BLUE = "BLUE COLOR",
    GREEN = "GREEN COLOR"
}

type ValueOf<T> = T[keyof T];

function getEnumKeyByEnumValue<R extends (string | number), T extends {[key: string] : R}>(myEnum: T, enumValue: ValueOf<T>): string {
  let keys = Object.keys(myEnum).filter((x) => myEnum[x] == enumValue);
  return keys.length > 0 ? keys[0] : '';
}


let enumKey = getEnumKeyByEnumValue(Colors, Colors.RED);

// This line will result in an error: Argument of type '"OTHER COLOR"' is not assignable to parameter of type 'ValueOf<typeof Colors>'.
//let enumKey = getEnumKeyByEnumValue(Colors, "OTHER COLOR");

console.log(enumKey);

https://jsfiddle.net/2ry1u8qb/

Answer 13

Answer №7

I want to make some adjustments to the code:

return Object.keys(ourEnum).find(y => ourEnum[y] === valueOfEnum);

Answer 14

I want to make some adjustments to the code:

return Object.keys(ourEnum).find(y => ourEnum[y] === valueOfEnum);

Answer 15

Answer №8

If you want to retrieve enum keys in this way, you can use the following code snippet:

enum Shades {
    LIGHT = "LIGHT SHADE",
    DARK = "DARK SHADE",
    NEUTRAL = "NEUTRAL SHADE"
}

for (let value in Shades) { 
    if (Shades[value] === "DARK SHADE") { 
        console.log(value);
    }
}

Answer 16

If you want to retrieve enum keys in this way, you can use the following code snippet:

enum Shades {
    LIGHT = "LIGHT SHADE",
    DARK = "DARK SHADE",
    NEUTRAL = "NEUTRAL SHADE"
}

for (let value in Shades) { 
    if (Shades[value] === "DARK SHADE") { 
        console.log(value);
    }
}

Answer 17

Answer №9

While many are discussing runtime solutions, I have a Typescript solution to share:

enum NEW_ENUM {
    ITEM_ONE = 'First Item',
    ITEM_TWO = 'Second Item'
}

// Outcome:
// type FlippedEnum = {
//     readonly "First Item": "ITEM_ONE";
//     readonly "Second Item": "ITEM_TWO";
}
type FlippedEnum = {[F in keyof typeof NEW_ENUM as typeof NEW_ENUM[F]]: F}

// Outcome:
// type EnumValueFromKey = NEW_ENUM.ITEM_ONE
type EnumValueFromKey = typeof NEW_ENUM[FlippedEnum['First Item']]

Start by creating a type that swaps the positions of the keys and values in the enum. (FlippedEnum)

Using typeof with the enum allows indexed access into the keys of the enum as strings. Then, you can retrieve the name of that key using the flipped enum type.

This approach fully supports autocomplete for the value string and more.

Answer 18

While many are discussing runtime solutions, I have a Typescript solution to share:

enum NEW_ENUM {
    ITEM_ONE = 'First Item',
    ITEM_TWO = 'Second Item'
}

// Outcome:
// type FlippedEnum = {
//     readonly "First Item": "ITEM_ONE";
//     readonly "Second Item": "ITEM_TWO";
}
type FlippedEnum = {[F in keyof typeof NEW_ENUM as typeof NEW_ENUM[F]]: F}

// Outcome:
// type EnumValueFromKey = NEW_ENUM.ITEM_ONE
type EnumValueFromKey = typeof NEW_ENUM[FlippedEnum['First Item']]

Start by creating a type that swaps the positions of the keys and values in the enum. (FlippedEnum)

Using typeof with the enum allows indexed access into the keys of the enum as strings. Then, you can retrieve the name of that key using the flipped enum type.

This approach fully supports autocomplete for the value string and more.

Ways to retrieve the key of an enum based on its value within Typescript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Answer №9

Similar questions

Why am I encountering this rendering issue when passing data to the ReactTable component?

Utilizing several data sources within a single mat-table

Converting HTML templates into AMD modules using grunt-ts

Tips for dynamically loading a child component and passing data from the child component to the parent component

What is the best way to utilize a union of interfaces in TypeScript when working with instances?

Finding a solution for duplicate date selections in NextJS using react-calendar

Unexpected behavior observed with Angular Toggle Button functionality

Angular2 - Actively selecting a checkbox in an ngFor loop with a reactive form

Error encountered: ⨯ Compilation of TypeScript failed

Error: TypeError encountered during UI Runtime JSON conversion of Circular Data Structure

How can we direct the user to another tab in Angular Mat Tab using a child component?

What steps should I take to fix the error "Unused left side of comma operator with no side effects.ts(2695)" in my React project?

Issue with retrieving all phone numbers from a contact in Ionic

A single click is required for Observables to load on an HTML page

Patience is key when waiting for one observable to respond before triggering another in Angular's async environment

Dynamically modifying the display format of the Angular Material 2 DatePicker

The data type returned by a method is determined by the optional parameter specified in the

Creating TypeScript models from a JSON response in React components

What is the best way to access JavaScript built-ins in Typings when faced with name conflicts?

Angular 6: Harnessing the Power of RouterLinks