What is enumeration

Enumerations are a way to centrally manage a set of related variables. Many programming languages provide enum data types, but javascript does not. Typescript makes up for this.

usage

Let’s start with a simple example

enum Color {
    white,
    black,
    blue,
    green
}
const currectColor = Color.white

console.log(currectColor) / / 0
Copy the code

In the code above, currentColor will print 0. Why is that? Let’s take a look at the output JS code

var Color;
(function (Color) {
    Color[Color["white"] = 0] = "white";
    Color[Color["black"] = 1] = "black";
    Color[Color["blue"] = 2] = "blue";
    Color[Color["green"] = 3] = "green";
})(Color || (Color = {}));
var currectColor = Color.white;
console.log(currectColor);
Copy the code

This is an anonymous execute function. You can see that enumerations just hold a few variables in an object. What we need to focus on is the internal assignment statement, as in the first example

Color[Color["white"] = 0] = "white";
Copy the code

This might be a little confusing, but let’s break up the assignment

Color["white"] = 0
Color[0] = "white"
Copy the code

Note that in javascript assignments return the assigned value, so this is equivalent, and now we can see why currentColor prints 0. It is now also easy to infer the output of the following code

console.log(Color[0]) //white
Copy the code

Changes the number associated with an enumeration type

By default, enumeration types are numbered from 0 and then incremented by 1, as in the above code, but we can change their values by manually assigning

enum Color {
    white, / / 0
    black, / / 1
    blue,  / / 2
    green  / / 3
}
Copy the code
enum Color {
    white = 3
    black,
    blue,
    green
}
Copy the code

The above code is printed below

var Color;
(function (Color) {
    Color[Color["white"] = 3] = "white";
    Color[Color["black"] = 4] = "black";
    Color[Color["blue"] = 5] = "blue";
    Color[Color["green"] = 6] = "green";
})(Color || (Color = {}));
Copy the code

As you can see, the number is now increasing from the 3 that we assigned.

Enumerations are open ended

Look at the following code

enum Color {
    white,
    red,
}

enum Color {
    black = 2,
    blue
}
Copy the code

The above code generates the following JS

var Color;
(function (Color) {
    Color[Color["white"] = 0] = "white";
    Color[Color["red"] = 1] = "red";
})(Color || (Color = {}));
(function (Color) {
    Color[Color["black"] = 2] = "black";
    Color[Color["blue"] = 3] = "blue";
})(Color || (Color = {}));
Copy the code

As you can see, enumerations can be extended by repeated declarations.

Initialize an enumeration type with a string

enum Color {
    White = 'white',
    Red = 'red',}Copy the code

The above code outputs js as follows

var Color;
(function (Color) {
    Color["White"] = "white";
    Color["Red"] = "red";
})(Color || (Color = {}));
Copy the code

As you can see, when we initialize the enumerator with a string, we mount the property directly to the Color object without numbering it. So, when we initialize an enumerator with a string, all subsequent members must be initialized with a string, otherwise TS will report an error. There is no way to determine the following member number.