Day13: Learning TypeScript: Enums

TypeScript is very particular about types, and I have been writing for many days without finishing (actually, I need 30 articles XDD). Let's continue with the notes on Enums.

Enums are used in scenarios where values are limited to a certain range. They can be used to manage multiple constants of the same series, serving as state indicators. For example, there can only be seven days in a week, and colors can be limited to red, green, and blue. You can also define custom values for each.

Numeric Enums

Use the enum keyword to define:

enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};

At this point, we can see that the enum members are automatically assigned values starting from 0 and will also create a reverse mapping from enum values to enum names:

var Days;
(function (Days) {
    Days[Days["Sun"] = 0] = "Sun";
    Days[Days["Mon"] = 1] = "Mon";
    Days[Days["Tue"] = 2] = "Tue";
    Days[Days["Wed"] = 3] = "Wed";
    Days[Days["Thu"] = 4] = "Thu";
    Days[Days["Fri"] = 5] = "Fri";
    Days[Days["Sat"] = 6] = "Sat";
})(Days || (Days = {}));

Manual Assignment

You can manually define different values.

enum Days {Sun = 7, Mon = 1, Tue, Wed, Thu, Fri, Sat};

After compilation:

var Days;
(function (Days) {
    Days[Days["Sun"] = 7] = "Sun";
    Days[Days["Mon"] = 1] = "Mon";
    Days[Days["Tue"] = 2] = "Tue";
    Days[Days["Wed"] = 3] = "Wed";
    Days[Days["Thu"] = 4] = "Thu";
    Days[Days["Fri"] = 5] = "Fri";
    Days[Days["Sat"] = 6] = "Sat";
})(Days || (Days = {}));

Be Careful of Overwriting

If you suddenly specify a value in between, it will start recalculating from the current value. For example, Days[3] was initially "Sun" but is later overwritten by "Wed". TypeScript will not throw an error for this, so be cautious.

enum Days {Sun = 3, Mon = 1, Tue, Wed, Thu, Fri, Sat};

console.log(Days["Sun"] === 3); // true
console.log(Days["Wed"] === 3); // true
console.log(Days[3] === "Sun"); // false
console.log(Days[3] === "Wed"); // true

Type Assertion

You can use type assertion to define one of the manually assigned enum items as a non-number type, allowing TypeScript to ignore type checks.

enum Days {Sun = 3, Mon = 1, Tue = "Tuesday", Wed = 3, Thu = 4, Fri = 5, Sat = 6};

Heterogeneous Enums

Although enums can mix numbers and strings, it is best to avoid this style:

enum BooleanLikeHeterogeneousEnum {
  No = 0,
  Yes = "YES",
}

Constant and Computed Members

Enum members can be either constant members or computed members. The examples we provided earlier are constant members. A typical example of a computed member is as follows, where "blue".length is a computed member:

enum Color {Red, Green, Blue = "blue".length};
console.log(Color.Blue); //4

To define constant members, refer to this article or the official documentation.

Operators like <<, |, and & are considered constant members:

enum FileAccess {
  // constant members
  None,
  Read = 1 << 1,
  Write = 1 << 2,
  ReadWrite = Read | Write,
  // computed member
  G = "123".length,
}

Const Enums

You can define enum types using const enum:

const enum Directions {
    Up,
    Down,
    Left,
    Right
}

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

The difference between constant enums and regular enums is that they are removed at compile time and cannot contain computed members, only constant members.

After compilation:

var directions = [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];

Ambient Enums

Ambient Enums are defined using declare enum:

declare enum Directions {
    Up,
    Down,
    Left,
    Right
}

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

Types defined with declare are only used for compile-time checks and will be removed from the compilation result.

After compilation:

var directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

In the next article, we will finally introduce interfaces! 🎉

References

https://willh.gitbook.io/typescript-tutorial/advanced/enum#chang-shu-xiang-he-ji-suan-suo-de-xiang https://www.typescriptlang.org/docs/handbook/enums.html