Retrieving data from Typescript enums using strings

Question

Retrieving data from Typescript enums using strings

I need assistance extracting values from this enum:

enum Sizes {
  Tiny = "Tiny",
  VerySmall = "Very Small",
  Small = "Small",
  Medium = "Medium",
  Large = "Large",
  VeryLarge = "Very Large"
}

Although I followed recommendations from other sources, the output I am receiving is unexpected. Here is what I currently get:

var text=""
for (var size in Sizes) {
    text = text + "\n" + size;
}

console.log(text);

Tiny
VerySmall
Very Large
Small
Medium
Large
VeryLarge

I specifically do not want to include VerySmall and VeryLarge in my results. Can anyone explain why these are showing up and how I can achieve my desired outcome?

Appreciate any help provided.

typescript

Answer 1

Answer №1

It seems like the typescript compiler being used is version pre-2.4, where string value support was not yet added in enums. Typically, there's a reverse mapping from values to enums and values are usually numbers. However, if you tried to use strings before version 2.4, the compiler wouldn't know how to handle it (and would actually result in errors), but it would still generate the source code.

Contrast with version 2.4:

var Sizes;
(function (Sizes) {
    Sizes["Tiny"] = "Tiny";
    Sizes["VerySmall"] = "Very Small";
    Sizes["Small"] = "Small";
    Sizes["Medium"] = "Medium";
    Sizes["Large"] = "Large";
    Sizes["VeryLarge"] = "Very Large";
})(Sizes || (Sizes = {}));

Versus version 2.3:

var Sizes;
(function (Sizes) {
    Sizes[Sizes["Tiny"] = "Tiny"] = "Tiny";
    Sizes[Sizes["VerySmall"] = "Very Small"] = "VerySmall";
    Sizes[Sizes["Small"] = "Small"] = "Small";
    Sizes[Sizes["Medium"] = "Medium"] = "Medium";
    Sizes[Sizes["Large"] = "Large"] = "Large";
    Sizes[Sizes["VeryLarge"] = "Very Large"] = "VeryLarge";
})(Sizes || (Sizes = {}));

And version 2.3 without string values:

var Sizes;
(function (Sizes) {
    Sizes[Sizes["Tiny"] = 0] = "Tiny";
    Sizes[Sizes["VerySmall"] = 1] = "VerySmall";
    Sizes[Sizes["Small"] = 2] = "Small";
    Sizes[Sizes["Medium"] = 3] = "Medium";
    Sizes[Sizes["Large"] = 4] = "Large";
    Sizes[Sizes["VeryLarge"] = 5] = "VeryLarge";
})(Sizes || (Sizes = {}));

If you wish to enforce that reverse mapping in versions 2.4 and higher, you can assert the values to any.

enum Sizes {
  Tiny = <any>"Tiny",
  VerySmall = <any>"Very Small",
  Small = <any>"Small",
  Medium = <any>"Medium",
  Large = <any>"Large",
  VeryLarge = <any>"Very Large"
}

We'll just consider it a feature.

Answer 2

It seems like the typescript compiler being used is version pre-2.4, where string value support was not yet added in enums. Typically, there's a reverse mapping from values to enums and values are usually numbers. However, if you tried to use strings before version 2.4, the compiler wouldn't know how to handle it (and would actually result in errors), but it would still generate the source code.

Contrast with version 2.4:

var Sizes;
(function (Sizes) {
    Sizes["Tiny"] = "Tiny";
    Sizes["VerySmall"] = "Very Small";
    Sizes["Small"] = "Small";
    Sizes["Medium"] = "Medium";
    Sizes["Large"] = "Large";
    Sizes["VeryLarge"] = "Very Large";
})(Sizes || (Sizes = {}));

Versus version 2.3:

var Sizes;
(function (Sizes) {
    Sizes[Sizes["Tiny"] = "Tiny"] = "Tiny";
    Sizes[Sizes["VerySmall"] = "Very Small"] = "VerySmall";
    Sizes[Sizes["Small"] = "Small"] = "Small";
    Sizes[Sizes["Medium"] = "Medium"] = "Medium";
    Sizes[Sizes["Large"] = "Large"] = "Large";
    Sizes[Sizes["VeryLarge"] = "Very Large"] = "VeryLarge";
})(Sizes || (Sizes = {}));

And version 2.3 without string values:

var Sizes;
(function (Sizes) {
    Sizes[Sizes["Tiny"] = 0] = "Tiny";
    Sizes[Sizes["VerySmall"] = 1] = "VerySmall";
    Sizes[Sizes["Small"] = 2] = "Small";
    Sizes[Sizes["Medium"] = 3] = "Medium";
    Sizes[Sizes["Large"] = 4] = "Large";
    Sizes[Sizes["VeryLarge"] = 5] = "VeryLarge";
})(Sizes || (Sizes = {}));

If you wish to enforce that reverse mapping in versions 2.4 and higher, you can assert the values to any.

enum Sizes {
  Tiny = <any>"Tiny",
  VerySmall = <any>"Very Small",
  Small = <any>"Small",
  Medium = <any>"Medium",
  Large = <any>"Large",
  VeryLarge = <any>"Very Large"
}

We'll just consider it a feature.

Answer 3

Answer №2

To retrieve the enum keys and display their values, you can utilize Object.keys in the following manner:

enum Sizes {
  Tiny = "Tiny",
  VerySmall = "Very Small",
  Small = "Small",
  Medium = "Medium",
  Large = "Large",
  VeryLarge = "Very Large"
}

for (const size of Object.keys(Sizes)) {
    console.log(Sizes[size]);
}

Result:

Tiny
Very Small
Small
Medium
Large
Very Large

Code after transpilation:

var Sizes;
(function (Sizes) {
    Sizes["Tiny"] = "Tiny";
    Sizes["VerySmall"] = "Very Small";
    Sizes["Small"] = "Small";
    Sizes["Medium"] = "Medium";
    Sizes["Large"] = "Large";
    Sizes["VeryLarge"] = "Very Large";
})(Sizes || (Sizes = {}));
for (var _i = 0, _a = Object.keys(Sizes); _i < _a.length; _i++) {
    var size = _a[_i];
    console.log(Sizes[size]);
}

Answer 4

To retrieve the enum keys and display their values, you can utilize Object.keys in the following manner:

enum Sizes {
  Tiny = "Tiny",
  VerySmall = "Very Small",
  Small = "Small",
  Medium = "Medium",
  Large = "Large",
  VeryLarge = "Very Large"
}

for (const size of Object.keys(Sizes)) {
    console.log(Sizes[size]);
}

Result:

Tiny
Very Small
Small
Medium
Large
Very Large

Code after transpilation:

var Sizes;
(function (Sizes) {
    Sizes["Tiny"] = "Tiny";
    Sizes["VerySmall"] = "Very Small";
    Sizes["Small"] = "Small";
    Sizes["Medium"] = "Medium";
    Sizes["Large"] = "Large";
    Sizes["VeryLarge"] = "Very Large";
})(Sizes || (Sizes = {}));
for (var _i = 0, _a = Object.keys(Sizes); _i < _a.length; _i++) {
    var size = _a[_i];
    console.log(Sizes[size]);
}

Answer 5

Answer №3

In my TypeScript example


enum Sizes {
  Tiny = "Tiny",
  VerySmall = "Very Small",
  Small = "Small",
  Medium = "Medium",
  Large = "Large",
  VeryLarge = "Very Large"
}
class SizePrinter {
  constructor() {
    let text = '';

    for (const key in Sizes) {
      if (Sizes.hasOwnProperty(key)) {
        text += Sizes[key] + '<br/>';
      }
    }
    console.log(text);

    text = '';
    Object.keys(Sizes).map(key => text += Sizes[key] + '<br/>');
    console.log(text);
  }
}
let printer = new SizePrinter();

It's important to include an if-statement within a for-In loop!

Both console.log(text) statements should display the same output string.

Tiny<br/>Very Small<br/>Small<br/>Medium<br/>Large<br/>Very Large<br/>

If you log Sizes[size] to the console after the for-In loop, you can understand what happens and why you get the values.

Answer 6

In my TypeScript example


enum Sizes {
  Tiny = "Tiny",
  VerySmall = "Very Small",
  Small = "Small",
  Medium = "Medium",
  Large = "Large",
  VeryLarge = "Very Large"
}
class SizePrinter {
  constructor() {
    let text = '';

    for (const key in Sizes) {
      if (Sizes.hasOwnProperty(key)) {
        text += Sizes[key] + '<br/>';
      }
    }
    console.log(text);

    text = '';
    Object.keys(Sizes).map(key => text += Sizes[key] + '<br/>');
    console.log(text);
  }
}
let printer = new SizePrinter();

It's important to include an if-statement within a for-In loop!

Both console.log(text) statements should display the same output string.

Tiny<br/>Very Small<br/>Small<br/>Medium<br/>Large<br/>Very Large<br/>

If you log Sizes[size] to the console after the for-In loop, you can understand what happens and why you get the values.

Retrieving data from Typescript enums using strings

Answer №1

Answer №2

Answer №3

Similar questions

What is the process for creating a new type from a nested part of an existing type?

Encountering the "ExpressionChangedAfterItHasBeenCheckedError" in Angular 2

What is the process for list.map to handle waiting for a request response?

An issue arises when trying to group and sum an array of objects due to difficulty converting strings to arrays in TypeScript

Data binding in Angular 2: Connecting components

Is it possible to transform a tuple type into a union?

Error: Virtual script not located; possibly absent <script lang="ts" / "allowJs": true / within the jsconfig.json.volar

Encountering problem while upgrading Angular Material from version 13 to 14 - error TS2307: Module '@angular/material/core/common-behaviors/constructor' not found

Learn how to hide the dropdown menu in Angular 8 by detecting clicks outside of the menu area

Data fetched using React Query

After each save, gulp-typescript is emitting errors, however, it works without any issues upon subsequent saves

Encountered an issue with a module not being found while trying to install a published React component library that is built using Rollup. The error message states:

Exploring unit tests: Customizing an NGRX selector generated by entityAdapter.getSelectors()

Unable to retrieve dynamically generated object property from an array in AngularJS 2+

What is the best way to bring in a variable initialized by an IIFE from a JavaScript file into a TypeScript class?

What is the best method to compare two times and determine if they fall on the same date within an Angular 2/4 application? The time should be in the format of "HH:mm AM

Using Higher Order Components in React with TypeScript to pass a component as a prop

Navigating through the exported components of a module without explicit type declarations

Exploring the implementation of a custom validator within an Angular service

Encountering data loss while mapping for the first time in React Native using useState - any solutions?