Why TypeScript's Enum is problematic

TypeScript introduces many features of statically compiled languages, such as class (now part of JavaScript), interface, generics and union types.

But today there is a type that needs to be discussed in detail, and that is enum.

For many static languages, enumeration is a very common language feature. For example, C, C#, Java and Swift. An enumeration is a set of constants that you can use in your code.

We use TypeScript to create a new enum to represent the days of the week:

enum DayOfWeek {
  Sunday,
  Monday,
  Tuesday,
  Wednesday,
  Thursday,
  Friday,
  Saturday
};

This enumeration is declared using the enum keyword followed by the DayOfWeek name. Then we define the constants that can be used in the enumeration.

Now we define a method that accepts a parameter of this enumeration type to determine whether the passed parameter is a weekend.

function isItTheWeekend(day: DayOfWeek) {
  switch (day) {
    case DayOfWeek.Sunday:
    case DayOfWeek.Saturday:
      return true;
 
    default:
      return false;
  }
}

Finally, we can use this:

console.log(isItTheWeekend(DayOfWeek.Monday)); // log: false

This is a very useful method for eliminating magic strings in programs.

However, things are far from as simple as we think. What will the following code call get after TypeScript compilation?

console.log(isItTheWeekend(2)); // is this valid?

You will be shocked to know the result. Such calls comply with TypeScript rules and the compiler will compile successfully.

What happened?

The above situation might make you think you have found a TypeScript bug. In fact, this is how TypeScript is designed.

We have created a new numeric enumeration here, and we can see what the compiled result is in the TypeScript Playground:

var DayOfWeek;
(function (DayOfWeek) {
    DayOfWeek[DayOfWeek["Sunday"] = 0] = "Sunday";
    DayOfWeek[DayOfWeek["Monday"] = 1] = "Monday";
    DayOfWeek[DayOfWeek["Tuesday"] = 2] = "Tuesday";
    DayOfWeek[DayOfWeek["Wednesday"] = 3] = "Wednesday";
    DayOfWeek[DayOfWeek["Thursday"] = 4] = "Thursday";
    DayOfWeek[DayOfWeek["Friday"] = 5] = "Friday";
    DayOfWeek[DayOfWeek["Saturday"] = 6] = "Saturday";
})(DayOfWeek || (DayOfWeek = {}));

The result is:

In fact, an enumeration is a JavaScript object.

The properties of this object are generated according to the enumeration constants I defined, and the corresponding numbers are generated according to the defined order (in order, Sunday is 0 and Saturday is 6). This object also has properties with numbers as keys and corresponding constant strings as values.

Therefore, we can pass numbers to the above method, and the numbers are mapped to the corresponding enumeration values. An enumeration is both a numeric constant and a string constant.

When to use

If a method receives an enumeration type parameter, but an arbitrary number will compile. Such a result obviously destroys the type safety system built by TypeScript. When can this be used?

Suppose you have a service that returns a JSON string, and you want to model this string so that a certain property is an enumeration.

What you store in your database are numbers. This can be easily solved by defining a TypeScript enum:

const day: DayOfWeek = 3;

This explicit type conversion performed during assignment converts the number into the corresponding constant of the enumeration. In other words, using this enumeration in the code will make the code easier to read.

Controlling the number of enumerations

The numbers corresponding to the members of the enumeration are generated according to the order defined by the enumeration constants. Can we control the value of this number? Yes, you can.

enum FileState {
  Read = 1,
  Write = 2
}

Just an enumeration describing the possible states of a file.

It can be either a read or write state, and we explicitly define the enumeration value. Now it is clear what values ​​are reasonable, because they are explicitly defined.

Bit value

But there is another case where it is very useful, bit value.

Let's take another look at the FileState enumeration and add a new enumeration value ReadWrite to it:

enum FileState {
  Read = 1,
  Write = 2,
  ReadWrite = 3
}

Then suppose there is a method that accepts a parameter of this type:

const file = await getFile("/path/to/file", FileState.Read | FileState.Write);

We used the | operator on FileState. This way we can use bitwise operations to get a new enumeration value. In this example, it is 3, the value of ReadWrite.

In fact, we can write it more clearly:

enum FileState {
  Read = 1,
  Write = 2,
  ReadWrite = Read | Write
}

The value of this ReadWrite is not hard-coded, but obtained through bitwise operation.

But be careful when using enums like this.

The following enumeration:

enum Foo {
  A = 1,
  B = 2,
  C = 3,
  D = 4,
  E = 5
}

If we want to get E (or 5), can we do it with bitwise operations: Foo.A | Foo.D or Foo.B | Foo.C?

So if you want to do bitwise operations with enumeration values, you need to know how to get the value.

Control Index

Typically, each enumeration value has a default numeric value. If necessary, you can also explicitly assign values ​​to these enumeration values. In addition, you can also assign values ​​to certain parts of the enumeration:

enum DayOfWeek {
  Sunday,
  Monday,
  Tuesday,
  Wednesday = 10,
  Thursday,
  Friday,
  Saturday
}

The first few values ​​are assigned by position, from 0 to 2 for Sunday to Tuesday. Then a new value is given on Wednesday, and from then on each value is incremented by 1. This may cause problems:

enum DayOfWeek {
  Sunday,
  Monday,
  Tuesday,
  Wednesday = 10,
  Thursday = 2,
  Friday,
  Saturday
}

Tuesday is assigned the value 2. What does the generated JavaScript look like?

var DayOfWeek;
(function (DayOfWeek) {
    DayOfWeek[DayOfWeek["Sunday"] = 0] = "Sunday";
    DayOfWeek[DayOfWeek["Monday"] = 1] = "Monday";
    DayOfWeek[DayOfWeek["Tuesday"] = 2] = "Tuesday";
    DayOfWeek[DayOfWeek["Wednesday"] = 10] = "Wednesday";
    DayOfWeek[DayOfWeek["Thursday"] = 2] = "Thursday";
    DayOfWeek[DayOfWeek["Friday"] = 3] = "Friday";
    DayOfWeek[DayOfWeek["Saturday"] = 4] = "Saturday";
})(DayOfWeek || (DayOfWeek = {}));

It looks like Tuesday and Thursday both have a value of 2.

Therefore, the set value needs to be displayed.

Non-numeric enumeration

So far, we have only discussed numeric enumerations, but enumeration values ​​do not have to be numbers. It can also be any constant or computed value:

enum DayOfWeek {
  Sunday = "Sun",
  Monday = "Mon",
  Tuesday = "Tuesday",
  Wednesday = "Wed",
  Thursday = "Thurs",
  Friday = "Fri",
  Saturday = "Sat"
}

Now you can't pass a numeric parameter to the isItTheWeekend method. This enumeration is no longer a numeric enumeration. However, we can't pass in arbitrary strings, because the enumeration knows what values ​​are reasonable.

This also brings up another problem:

const day: DayOfWeek = "Mon";

This won't work.

Strings cannot be assigned directly to enumerations, but require an explicit type conversion:

const day = "Mon" as DayOfWeek;
Can we assign other values ​​to it? In fact, enumerations can have many types of values:

enum Confusing {
  A,
  B = 1,
  C = 1 << 8,
  D = 1 + 2,
  E = "Hello World".length
}

The enumeration values ​​in this example are all numbers. However, these numeric values ​​can be assigned directly, calculated values, or the length property of a string. If they are all constants, they can be values ​​of various types:

enum MoreConfusion {
  A,
  B = 2,
  C = "C"
}

In this case it is difficult to understand how the data behind the enumeration works. Therefore, it is best not to use such enumerations.

in conclusion

TypeScript's enums are a great complement to JavaScript and can be very useful when used properly. It will help clean up the magic values ​​​​strings and numbers present in the code. And it is type safe.

This concludes this article on why TypeScript Enum has problems. For more information about TypeScript Enum, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!