CODEWITHSUNDEEP
typescriptenums
addam
addam

Reputation: 847

const enum in Typescript

I have a React application that is using Typescript. Right now I'm running into an issue with const enum. Here's my enum:

export const enum Snack {
    Apple = 0,
    Banana = 1,
    Orange = 2,
    Other = 3
}

The service I'm trying to match up to isn't returning the value, but the index of the item within the enum. So, for instance, if the user is set to snack on an apple, the service is returning a 0 for that user instead of 'Apple'. Ideally, I'd like to do something like:

var snackIndex = UserSnack.type; // returning 0 in this example
var userSnack = Snack[snackIndex]; // would return 'Apple'

When I try something similar I'm getting the following error:

error TS2476: A const enum member can only be accessed using a string literal.

Since the service I'm receiving the data from doesn't return the string, I'm having issues getting this working.

Any help is appreciated.

Upvotes: 63

Views: 86890

Answers (2)

Ryan Cavanaugh
Ryan Cavanaugh

Reputation: 221024

Just remove the const modifier.

const in an enum means the enum is fully erased during compilation. Const enum members are inlined at use sites. You can't index it by an arbitrary value.

In other words, the following TypeScript code

const enum Snack {
  Apple = 0,
  Banana = 1,
  Orange = 2,
  Other = 3
}

let snacks = [
  Snack.Apple,
  Snack.Banana,
  Snack.Orange,
  Snack.Other
];

is compiled to:

let Snacks = [
    0 /* Apple */,
    1 /* Banana */,
    2 /* Orange */,
    3 /* Other */
];

Compare it with non-const version:

enum Snack {
  Apple = 0,
  Banana = 1,
  Orange = 2,
  Other = 3
}

let Snacks = [
  Snack.Apple,
  Snack.Banana,
  Snack.Orange,
  Snack.Other
];

it is compiled to:

var Snack;
(function (Snack) {
    Snack[Snack["Apple"] = 0] = "Apple";
    Snack[Snack["Banana"] = 1] = "Banana";
    Snack[Snack["Orange"] = 2] = "Orange";
    Snack[Snack["Other"] = 3] = "Other";
})(Snack || (Snack = {}));
let Snacks = [
    Snack.Apple,
    Snack.Banana,
    Snack.Orange,
    Snack.Other
];

Source: const enums @ typescriptlang.org

Upvotes: 124

Alireza Ahmadi
Alireza Ahmadi

Reputation: 9903

In modern TypeScript, you may not need an enum when an object with as const could suffice:

export const Snack = {
    Apple: 0,
    Banana: 1,
    Orange: 2,
    Other: 3,
} as const;

And now when you hover your mouse you see this type: enter image description here

Enums can result in substantial code generation overhead. By integrating the as const keyword in TypeScript alongside Enums, we can significantly reduce the volume of generated code, leading to more streamlined and efficient development.

📣 Caution! Implementing as const alongside Enums removes the ability to utilize reverse mapping behavior. If your code relies on this functionality, it's advisable to avoid employing this approach.

Upvotes: 3

Related Questions