Getting values from Typescript enum with strings

Question

I am trying to get the values out of this enum:

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

With the following code as suggested in other StackOverflows, I get the following output:

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

console.log(text);

---

Tiny
VerySmall
Very Small
Small
Medium
Large
VeryLarge
Very Large

I do not want the entries VerySmall and VeryLarge, why are these appearing and how can I get my desired results?

Thanks!

Answer 1

It appears the typescript compiler being used is pre-2.4 where they added string value support in enums. Usually there's a reverse mapping from values to enums and values are generally numbers. But if you attempt to use strings prior to 2.4, the compiler wouldn't know what to do about it (and would actually produce errors) but will still generate the source.

Compare 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 = {}));

To 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 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 wanted to force that reverse mapping in 2.4 and up, you could 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"
}

Just call it a feature.

Answer 2

In TypeScrit

enum Sizes {
  Tiny = "Tiny",
  VerySmall = "Very Small",
  Small = "Small",
  Medium = "Medium",
  Large = "Large",
  VeryLarge = "Very Large"
}
class Test {
  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 t = new Test();

Remember that a for-In should have a if-Statement!

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

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

If you log Sizes[size] to console after the for-In you will imagine what happens and why you get the values.

Answer 3

You can use Object.keys to get the enum keys and log the values, like this:

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

Output:

Tiny
Very Small
Small
Medium
Large
Very Large

Transpiled example:

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