Enums Typescript

Question

I understand this question has been asked for a billion times, but i still can't understand how the enums work.
For example i got simple enum

export enum Type { 
  Null,
  First, 
  Second,
  Third
}

Now the question, what is difference betweeen those code

if (myObject.type === 2) doStuff();

And this one:

if (myObject.type === Type.Second) doStuff();

Im getting myObject from backend and i need to detect this object type to run some function, why should i do this with enums type
Maybe i'am wrong, but my examples do exactly the same things
Can you please explain me why should i use enums type in my example

@Atomzwieback it was just for example, like if i was getting some json object from my backend that has some type — Yar Sol, Jan 10 '19 at 07:46
There is no difference if you talk about the results. But there is a difference in developing process. You use enums to make sure that you use the same value everywhere in the code and make sure the value is in a set of values. For further reading: [https://stackoverflow.com/a/4709224/1331040](https://stackoverflow.com/a/4709224/1331040) — Harun Yilmaz, Jan 10 '19 at 07:48
You can just use numbers, but try reading this code again in six months and see if you remember exactly what each number meant. That's where an enum is useful — it's descriptive. — Ingo Bürk, Jan 10 '19 at 07:48

score 3 · Accepted Answer · answered Jan 10 '19 at 07:51

3

You're right that in plain Javascript they're doing the same thing. TypeScript is giving you extra safety in case your code changes in the future.

Imagine that at some point you add a new element to your enum. Perhaps a zeroith element between null and first. Now Type.Second will equal 3, and your check for === 2 will no longer be correct. By using the enum consistently you can avoid these future errors.

answered Jan 10 '19 at 07:51

GeekyMonkey

12,478
6
33
39

thanks for your response, also one question, if i add element between null and first my enum Type.Second will be equal to 3 and it will break my method isn't it? myObject.type (which is 2) won't be equal to Type.Second anymore. While myObject === 2 still will work correctly. Kinda don't understand the logic – Yar Sol Jan 10 '19 at 08:05
Once you add "zeroith" the enum becomes: null=0, zeroith=1, first=2, second=3. So a test against 2 will no longer be the same as a test against "second" – GeekyMonkey Jan 10 '19 at 08:21

score 2 · Answer 2 · answered Jan 10 '19 at 07:49

The two pieces of code are similar in what they do. Type.Second will contain the number associated with the enum member, and type (assuming it is typed as Type) should contain an enum member and thus should be a number at runtime. This means that in both cases you are comparing numbers, just that in the second case the value is inlined and in the first it comes from an object member access.

Now it from the server you don't return numbers, but you return the name of the enum, neither one will work as expected.

Also note that while not a good idea, you can modify the runtime values of the enum object, which might lead to unexpected results:

 (Type as any)["Second"] = 10

If you want the two to be exactly the same (ie the compiled code the the same in both cases) you can use a const enum. const enums don't use a runtime object, all memeer references are replaced with the actual value of the enum:

export const enum Type { 
  Null,
  First, 
  Second,
  Third
}

if (myObject.type === Type.Second) doStuff();
// Compiled to 

if (myObject.type === 2 /* Second */)
    doStuff

Orkhan Alikhanov · Answer 3 · 2019-01-10T08:24:58.520

It's worth taking a look at compiled javascript of your enum in typescript:

export enum Type { 
  Null,
  First, 
  Second,
  Third
}

It compiles roughly into:

var Type = {};
Type[Type["Null"] = 0] = "Null";
Type[Type["First"] = 1] = "First";
Type[Type["Second"] = 2] = "Second";
Type[Type["Third"] = 3] = "Third";

Try in playground

So, it's quite obvious that Type.Second will yield number 2 and Type[2] will return "Second".

Can you please explain to me why should I use enums type in my example?

Some of the common reasons are:

It is more readable
You won't get your code broken if someone changes enum:

export enum Type { 
    Null,
    First, 
    Second = 3, /// now it's 3
    Third
}

export enum Type { 
    Undefined, /// This is 0
    Null, /// 1
    First, /// 2
    Second, /// 3
    Third
}

Thus, your code becomes more reliable and maintainable

Enums Typescript

3 Answers3