A const enum member can only be accessed using string literal

avatar

Borislav Hadzhiev

Last updated: Mar 25, 2022

banner

Check out my new book

A const enum member can only be accessed using string literal #

The error "A const enum member can only be accessed using string literal" occurs when we try to access a const enum using an expression or a variable. To solve the error, remove the const keyword when declaring your enum.

const enum member can only be accessed literal

Here is an example of how the error occurs.

index.ts
export const enum Sizes { Small = 'S', Medium = 'M', Large = 'L', } const key = 'Small'; // ⛔️ Error: A const enum member can only be accessed using a string literal.ts(2476) const result = Sizes[key]; console.log(result);

We are trying to use a variable (or an expression) to access a const enum member.

Const enums can only use constant enum expressions and are completely removed during compilation.

Using const enums can be very confusing and is often discouraged.

To solve the error, we can either use string literals to access the const enum, or use a regular enum instead, by removing the const keyword from the enum's declaration.

index.ts
// 👇️ Removed const keyword export enum Sizes { Small = 'S', Medium = 'M', Large = 'L', } const key = 'Small'; // ✅ Works as expected const result = Sizes[key]; console.log(result); // 👉️ "S"

Regular enums in TypeScript are real objects and exists at runtime. On the other hand, const enum members are inlined at use sites and will not be available at runtime.

If you intended to use a const enum, you are only allowed to access its members using string literals (or dot notation).

index.ts
// 👇️ const enum export const enum Sizes { Small = 'S', Medium = 'M', Large = 'L', } // 👇️ string literal key const result = Sizes['Small']; console.log(result); // 👉️ "S"

This is because, when your const enum gets compiled to JavaScript, its members get inlined at use sites.

In other words, the following code that uses a const enum:

index.ts
export const enum Sizes { Small = 'S', Medium = 'M', Large = 'L', } const sizeS = Sizes.Small; const sizeM = Sizes.Medium;

Gets compiled to the following code.

index.ts
const sizeS = "S" /* Small */; const sizeM = "M" /* Medium */;

On the other hand, if we use a regular enum by removing the const keyword, the following code:

index.ts
export enum Sizes { Small = 'S', Medium = 'M', Large = 'L', } const sizeS = Sizes.Small; const sizeM = Sizes.Medium;

Gets compiled to:

index.ts
var Sizes; (function (Sizes) { Sizes["Small"] = "S"; Sizes["Medium"] = "M"; Sizes["Large"] = "L"; })(Sizes = exports.Sizes || (exports.Sizes = {})); const sizeS = Sizes.Small; const sizeM = Sizes.Medium;

Regular enums in TypeScript are real objects and exists at runtime. Therefore, they are much more flexible than const enums.

Using regular enums is also much more intuitive and should be preferred in most cases.

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.