How to get enum key by value in Typescript?

Question

I have an enum like this:

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

Could you let me know how to get enum key by value please? i.e., I need to pass "BLUE COLOR" and get 'BLUE'.

Colors["BLUE COLOR"] gives error 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'.

https://www.codegrepper.com/code-examples/typescript/angular+print+enum+value — firstpostcommenter, Sep 22 '21 at 12:50

Md Farid Uddin Kiron · Accepted Answer · 2023-02-14T00:41:12.017

68

If you want to get your enum key by value in that case you have to rewrite your enum in following manners: But same format also might be work in older version as well.

For Vanilla Js it should be like below:

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

For .tsx it should be like below:

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

For .ts it should be like below:

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

Then you can get like this way:

Retrieve enum key by value:

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

Output:

Another way: Retrieve enum key by value:

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

console.log(enumKey);

Output:

Test on jsfiddle:

Coding sample on jsfiddle

Note: There are new annoucement published on 25th August with TypeScript 4.8. Please be aware of it. You could have a look here.

edited Feb 14 '23 at 00:41

answered Jun 05 '20 at 12:54

Md Farid Uddin Kiron

16,817
3
17
43

When I use I get the following errors: ```Property 'any' does not exist on type 'JSX.IntrinsicElements'.ts(2339) Type 'Element' is not assignable to type 'Colors'.ts(2322) JSX element 'any' has no corresponding closing tag.``` – MAK Jun 05 '20 at 13:17
May be you have taken your file as .jsx. It should .ts – Md Farid Uddin Kiron Jun 05 '20 at 13:19
It works but my react app throw these errors when I use – MAK Jun 05 '20 at 13:20
My file extension is .tsx – MAK Jun 05 '20 at 13:21
Yes because react doesn't has any corresponding `data type` with `any` so replace that with `object` that should also work. – Md Farid Uddin Kiron Jun 05 '20 at 13:25
It considers `````` or ``` – MAK Jun 05 '20 at 13:29
Thank you. It worked: ```export enum Colors { RED = "RED COLOR" as any, BLUE = "BLUE COLOR" as any, GREEN = "GREEN COLOR" as any }``` Thanks to https://stackoverflow.com/questions/37613981/how-to-use-a-typescript-cast-with-jsx-tsx – MAK Jun 05 '20 at 13:35
Updated the answer as I am also tried that and alternative too. Thanks – Md Farid Uddin Kiron Jun 05 '20 at 13:40
38

why does this answer work? How does the `any` enable 'reverse lookups'? Thanks – New Alexandria Jan 07 '21 at 14:49
9

Getting error: `Computed values are not permitted in an enum with string valued members.` – Kristoffer Tølbøll Feb 18 '21 at 12:58
Would you please check this [link](https://github.com/microsoft/TypeScript/issues/27976). Hope it would help you. – Md Farid Uddin Kiron Feb 19 '21 at 07:14
3

as Dedi has written above, this answer does not work anymore.. – akcasoy Sep 15 '21 at 08:14
You could try either the way given. Additionally, are the context same? How do you trying? In above context its still working. – Md Farid Uddin Kiron Sep 15 '21 at 09:06
Be careful when using this with .tsx, it isn't mentioned here but this will have negative effects on inheritance. – Alex Dunlop Nov 24 '21 at 03:05
Thanks for sharing your concern, but here is no issue on `inheritance` so there will be no further problem. – Md Farid Uddin Kiron Nov 24 '21 at 09:07
For TypeScript 4.8, you'll need to add a non-null assertion on the enum type to avoid a new error (see [Correctness Fixes and Breaking Changes](https://devblogs.microsoft.com/typescript/announcing-typescript-4-8/#unconstrained-generics-no-longer-assignable-to) section) – Josh Broadhurst Sep 07 '22 at 21:21
I'm aware of these changes announce on 25th August however, I have answered this back in 2020. If you have better solution, you could offer that in another thread as you are always welcome therefore, added the reference. – Md Farid Uddin Kiron Sep 08 '22 at 05:42
1

This is awesome. I should've found this earlier.. – Changdae Park Oct 01 '22 at 02:45

score 49 · Answer 2 · answered Oct 19 '20 at 15:23

49

const findMe = Object.keys(Colors)[Object.values(Colors).indexOf("BLUE COLOR")];

https://jsfiddle.net/anniebbird/agy3unfk/3/

answered Oct 19 '20 at 15:23

Anna

2,911
6
29
42

score 25 · Answer 3 · answered Jun 14 '20 at 18:31

I am using this 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] : '';
}

Tests with jest

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

  enum TestEnumWithString {
    ZERO = 'ZERO'
  }

  it('should return correct key when enum has number values', function() {
    const key = getEnumKeyByEnumValue(TestEnumWithNumber, TestEnumWithNumber.ZERO);
    expect(key).toBe('ZERO');
  });

  it('should return correct key when enum has string values', function() {
    const key = getEnumKeyByEnumValue(TestEnumWithString, TestEnumWithString.ZERO);
    expect(key).toBe('ZERO');
  });

  it('should return correct key by passing corresponding string value', function() {
    const key = getEnumKeyByEnumValue(TestEnumWithString, 'ZERO');
    expect(key).toBe('ZERO');
  });
});

Hope it helps someone

I like this answer but is this function possible without using `any`? — Aaron Hill, Feb 15 '21 at 22:13
@AaronHill I don't know what else would work apart from `any` — Nux, Feb 16 '21 at 13:53

score 15 · Answer 4 · answered Jul 26 '21 at 16:00

Improved getEnumKeyByEnumValue without using any:

export function getEnumKeyByEnumValue<
  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] : '';
}

nikiphoros · Answer 5 · 2022-06-10T10:00:17.053

6

try like this

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

 console.log(Object.keys(Colors)[Object.values(Colors).indexOf('BLUE COLOR' as unknown as Colors)]);

edited Jun 10 '22 at 10:00

answered Jun 10 '22 at 08:52

nikiphoros

93
1
5

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 11 '22 at 06:39

score 2 · Answer 6 · answered Sep 11 '22 at 16:57

Improved getEnumKeyByEnumValue by adding type checks:

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);

// next line will trigger: 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/

score 1 · Answer 7 · answered Jun 05 '20 at 12:53

1

You can do something like this fetching the enum keys:

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

for (let item in Colors) { 
    if (Colors[item] === "BLUE COLOR") { 
        alert(item)
    }
}

answered Jun 05 '20 at 12:53

Emanuele Scarabattoli

4,103
1
12
21

8

But I guess its little costly and noisy too. – Md Farid Uddin Kiron Jun 05 '20 at 12:56
It depends on your needs. – Emanuele Scarabattoli Jun 05 '20 at 12:59

score 1 · Answer 8 · answered Jan 30 '23 at 12:32

1

I'd like to fix the code a little:

return Object.keys(myEnum).find(x => myEnum[x] === enumValue);

answered Jan 30 '23 at 12:32

Michael Fyodorov

11
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 01 '23 at 12:17
It doesn't work for my enum with string values: `TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'typeof MyEnum'. No index signature with a parameter of type 'string' was found on type 'typeof MyEnum'. ` – PatrykMilewski May 18 '23 at 15:19

How to get enum key by value in Typescript?

8 Answers8

Linked