How to convert a String to Enum in TypeScript

avatar
Borislav Hadzhiev

Last updated: Jan 20, 2023
2 min

banner

# Convert a String to Enum in TypeScript

To convert a string to an enum:

  1. Use keyof typeof to cast the string to the type of the enum.
  2. Use bracket notation to access the corresponding value of the string in the enum.
index.tsx
enum EmailStatus { Read, Unread, Draft, } // ๐Ÿ‘‡๏ธ String to enum const str: keyof typeof EmailStatus = 'Read'; console.log(EmailStatus[str]); // ๐Ÿ‘‰๏ธ 0 const enumToStr = EmailStatus[EmailStatus.Read]; console.log(enumToStr); // ๐Ÿ‘‰๏ธ "Read"

convert string to enum in typescript

Using keyof typeof allows us to get a type that represents all Enum keys as strings.

index.tsx
enum EmailStatus { Read, Unread, Draft, } // ๐Ÿ‘‡๏ธ type T = "Read" | "Unread" | "Draft" type T = keyof typeof EmailStatus;

If we set the type of the string to one of the possible types of the enum, we would get an error if there is a mismatch.

index.tsx
enum EmailStatus { Read, Unread, Draft, } // โ›”๏ธ Error: Type "Test" is not assignable to type "Read" | "Unread" | "Draft" const str: keyof typeof EmailStatus = 'Test'; console.log(EmailStatus[str]); // ๐Ÿ‘‰๏ธ undefined

You can access the value that corresponds to the string in the enum by using bracket notation.

index.tsx
enum EmailStatus { Read, Unread, Draft, } const str: keyof typeof EmailStatus = 'Read'; console.log(EmailStatus[str]); // ๐Ÿ‘‰๏ธ 0

# Convert a String to Enum using a type assertion

An alternative approach is to assert that the variable that stores the string has a type of Enum.

index.tsx
enum EmailStatus { Read, Unread, Draft, } const str = 'Read'; const strEnum = str as unknown as EmailStatus; console.log(EmailStatus[strEnum]); // ๐Ÿ‘‰๏ธ 0

convert string to enum using type assertion

We used a type assertion to specify that the str variable stores a value that has a type of EmailStatus.

This approach is not as clean as using keyof typeof and should be avoided when possible because it doesn't defend against incorrect values.

You could cast any string to have a value of EmailStatus without getting an error.

index.tsx
enum EmailStatus { Read, Unread, Draft, } const str = 'Test'; const strEnum = str as unknown as EmailStatus; console.log(EmailStatus[strEnum]); // ๐Ÿ‘‰๏ธ undefined

can cast any string to have value of email status

This is not the case when using keyof typeof.

index.tsx
enum EmailStatus { Read, Unread, Draft, } // โ›”๏ธ Error: Type "Test" is not assignable to type "Read" | "Unread" | "Draft" const str: keyof typeof EmailStatus = 'Test';

TypeScript is smart enough to notice that Test is not one of the keys in the enum and shows an error when a typo is made.

I've also written an article on how to convert an enum to a string.

If you need to check if a value exists in an enum, click on the following article.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev