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

Combine the values in the array with the input

Guide to Validating Fields in Angular's Reactive Forms After Using patchValue

Incorporate any enum value into a Typescript interface

Tips for properly executing directives in sequential order while using async in Angular 13

"Optimize Your Data with PrimeNG's Table Filtering Feature

What is the best way to loop through an array that contains a custom data type

Incorporating TypeScript into a project originally developed in JavaScript

How can I dynamically insert a variable string into a link tag using React and TypeScript?

Implementing strict typing in Twitter widget to eliminate issues with accessing members

Encountering an obscure issue when using Discord.js v14 after attempting to cancel and resubmit a modal

The openapi-generator with the typescript-angular language option appears to be experiencing some issues

What is the proper way to include type annotation in a destructured object literal when using the rest operator?

How can a child component trigger an event in its parent component?

Navigating through a multidimensional array in Angular 2 / TypeScript, moving both upwards and downwards

What is a Mongoose Schema type in TypeScript and how can it be used as a custom

Angular Universal causing issues with updating the DOM component

Error: The URL constructor is unable to process /account as a valid URL address

I am looking to implement tab navigation for page switching in my project, which is built with react-redux and react-router

Using TypeScript to automatically determine the argument type of a function by analyzing the return type of a different function

Unable to modify the active property of the specified object as it is read-only