Explain TypeScript enumeration types in detail

Preface:

TypeScript adds enumeration types based on the original ES types, so that a group of values ​​can also be given a name in TypeScript . This is more developer-friendly, and it can be understood that enumeration is a dictionary.

Enumeration types are defined using enum:

enum Day {
  SUNDAY,
  MONDAY,
  TUESDAY,
  WEDNESDAY,
  THURSDAY,
  FRIDAY,
  SATURDAY
 }

The enumeration type Day defined above has 7 values. TypeScript will assign numbers to each of them, starting from 0 by default. When using them, you can use the names without having to remember the correspondence between numbers and names:

enum Day {
  SUNDAY = 0,
  MONDAY = 1,
  TUESDAY = 2,
  WEDNESDAY = 3,
  THURSDAY = 4,
  FRIDAY = 5,
  SATURDAY = 6
}

Here is what the above code looks like after being translated into JavaScript:

var Day = void 0;
(function (Day) {
  Day[Day["SUNDAY"] = 0] = "SUNDAY";
  Day[Day["MONDAY"] = 1] = "MONDAY";
  Day[Day["TUESDAY"] = 2] = "TUESDAY";
  Day[Day["WEDNESDAY"] = 3] = "WEDNESDAY";
  Day[Day["THURSDAY"] = 4] = "THURSDAY";
  Day[Day["FRIDAY"] = 5] = "FRIDAY";
  Day[Day["SATURDAY"] = 6] = "SATURDAY";
})(Day || (Day = {}));

As you can see, each value is assigned a corresponding number.

In TypeScript, we need to use the dot form to get the members of the enumeration set:

console.log(Day.SUNDAY) // 0
console.log(Day.MONDAY) // 1

After talking about the basic use of enumeration types, let's take a look at the common enumeration types.

1. Digital Enumeration

In the above example, when only the constant name is specified, a set of numbers that starts at 0 and increases by default is defined, which is called a digital enumeration. If you want to start incrementing from another value, you can specify the index of the first value:

enum Color {
  Red = 2,
  Blue,
  Yellow
}
console.log(Color.Red, Color.Blue, Color.Yellow); // 2 3 4

You can specify an index value for a field, and the index values ​​that are not specified will be incremented by one:

//Specify some fields, and use the default incremental index for others enum Status {
  Ok = 200,
  Created,
  Accepted,
  BadRequest = 400,
  Unauthorized
}
console.log(Status.Created, Status.Accepted, Status.Unauthorized); // 201 202 401

In addition, you can specify discontinuous arbitrary index values ​​for each field:

enum Status {
  Success = 200,
  NotFound = 404,
  Error = 500
}
console.log(Status.Success, Status.NotFound, Status.Error); // 200 404 500

Numeric enumerations can use computed values ​​and constants when defining values. However, please note that if a field uses a calculated value or constant, the field immediately following the field must be set with an initial value. The default increment value cannot be used here. Let's take a look at an example:

// The initial value is the calculated value const getValue = () => {
  return 0;
};
enum ErrorIndex {
  a = getValue(),
  b, // error enumeration members must have initialized values ​​c
}
enum RightIndex {
  a = getValue(),
  b = 1,
  c
}
// The initial value is a constant const Start = 1;
enum Index {
  a = Start,
  b, // error enumeration members must have initialized values ​​c
}

2. String Enumeration

TypeScript calls an enumeration whose value is a string literal a string enumeration. A string enumeration value requires that the value of each field must be a string literal or another string enumeration member in the enumeration value:

// Using string literal enum Message {
  Error = "Sorry, error",
  Success = "Hoho, success"
}
console.log(Message.Error); // 'Sorry, error'

// Use other enumeration members in the enumeration value enum Message {
  Error = "error message",
  ServerError = Error,
  ClientError = Error
}
console.log(Message.Error); // 'error message'
console.log(Message.ServerError); // 'error message'

Note: The other enumeration members here refer to the enumeration members in the same enumeration value. Because string enumerations cannot use constants or calculated values, they cannot use members in other enumeration values.

3. Reverse mapping

When defining an enumeration type value, you can get the corresponding value value through Enum['key'] or Enum.key . TypeScript also supports reverse mapping, but reverse mapping only supports numeric enumerations, not string enumerations.

Let’s look at the following example:

enum Status {
  Success = 200,
  NotFound = 404,
  Error = 500
}
console.log(Status["Success"]); // 200
console.log(Status[200]); // 'Success'
console.log(Status[Status["Success"]]); // 'Success'

The enumeration defined in TypeScript is actually an object after compilation. In the generated code, the enumeration type is compiled into an object, which contains the forward mapping (name -> value) and the reverse mapping (value -> name).

Let's take a look at the effect of Status compiled in the above code:

{
    200: "Success",
    404: "NotFound",
    500: "Error",
    Error: 500,
    NotFound: 404,
    Success: 200
}

As you can see, TypeScript uses the field names of the defined enumeration values ​​as the property names and property values ​​of the object, and the field values ​​of the enumeration values ​​as the property values ​​and property names of the object, and adds them to the object at the same time. In this way, you can get the value through the field name of the enumeration value, or get the field name through the value of the enumeration value.

4. Heterogeneous Enumeration

Heterogeneous enumerations are enumerations whose member values ​​have both numeric and string types, as follows:

enum Result {
  Failed = 0,
  Success = "Success"
}

Using asynchronous enumerations is not recommended during development. Because when a class of values ​​is organized into an enumeration value, their characteristics are often similar. For example, when making an interface request, the return status code is a numeric value, and if it is a prompt message, it is a string. Therefore, when using enumerations, it is often possible to avoid using heterogeneous enumerations, mainly by organizing the types.

5. Constant Enumeration

In TypeScript , after defining the enumeration value, the code compiled into JavaScript will create a corresponding object that can be used when the program is running. But what if you use enumerations just to make your program readable and don't need compiled objects? This will increase the size of the compiled code. There is a const enum (constant enumeration) in TypeScript . Add the const keyword before the statement defining the enumeration. In this way, the compiled code will not create this object, but will only get the corresponding value from the enumeration for replacement:

enum Status {
  Off,
  On
}
const enum Animal {
  Dog,
  Cat
}
const status = Status.On;
const animal = Animal.Dog;

The above code is compiled into JavaScript like this:

var Status;
(function(Status) {
  Status[(Status["Off"] = 0)] = "Off";
  Status[(Status["On"] = 1)] = "On";
})(Status || (Status = {}));
var status = Status.On;
var animal = 0; // Dog 

For the processing of Status , first define a variable Status, then define an immediately executed function, and add corresponding properties to Status in the function. First, Status[“Off”] = 0 sets the Off property of Status object and sets the value to 0. The return value of this assignment expression is the value on the right side of the equal sign, which is 0, so Status[Status [“Off”] = 0] = "Off" is equivalent to Status[0] = “Off” . After creating this object, the On property value of Status is assigned to status; let's look at the processing of animal. The compiled code does not create an Animal object like Status, but directly replaces the value 0 of Animal.Dog with the Animal.Dog position of const animal = Animal.Dog expression.

By defining an enumeration of constants, you can maintain a collection of related constants in a clear, structured form. Furthermore, because the definitions and inline member values ​​are erased after translation, the code size and performance are no worse than directly inlining constant values.

6. Enumeration member types and union enumeration types

If all members in an enumeration value are values ​​of literal types, then each member of the enumeration and the enumeration value itself can be used as a type. We call such enumeration members literal enumeration members.

There are three types of enumeration member values ​​that meet the conditions:

• Enumeration members without initial values, for example: enum E { A }

• The value is a string literal, for example: enum E { A = 'a' }

• The value is a numeric literal, or a numeric literal with a - sign, for example: enum E { A = 1 }、enum E { A = -1 }

(1) Enumeration member type

When all enumeration cases have literal enumeration values, the enumeration cases become types:

enum Animal {
  Dog = 1,
  Cat = 2
}

interface Dog {
  type: Animal.Dog; 
}
interface Cat {
  type: Animal.Cat; 
}

let cat: Cat = {
  type: Animal.Dog // error [ts] Type 'Animal.Dog' is not assignable to type 'Animal.Cat'
};
let dog: Dog = {
  type: Animal.Dog
};

As you can see, the seventh line of the code uses Animal.Dog as the type, specifying that the interface Dog must have a type field of type Animal.Dog .

(2) Joint enumeration type

When an enumeration value meets the conditions, it can be regarded as a union type containing all members:

enum Status {
  Off,
  On
}
interface Light {
  status: Status;
}
enum Animal {
  Dog = 1,
  Cat = 2
}
const light1: Light = {
  status: Animal.Dog // error Type 'Animal.Dog' is not assignable to type 'Status'
};
const light2: Light = {
  status: Status.Off
};
const light3: Light = {
  status: Status.On
};

The above example defines the type of status field of the interface Light as the enumeration value Status . Then the attribute value of status must be one of Status.Off and Status.On, which is equivalent to status: Status.Off | Status.On .

7. Enumeration Merge

After talking about common enumeration types, let's take a look at the concept of enumeration merging. For the values ​​of the enumeration type, we can declare them separately:

enum Day {
  SUNDAY,
  MONDAY,
  TUESDAY
 }

enum Day {
  WEDNESDAY,
  THURSDAY,
  FRIDAY,
  SATURDAY
 }

At this time, TypeScript will merge the enumeration values, and the code compiled into JavaScript after merging is as follows:

var Day = void 0;
(function (Day) {
  Day[Day["SUNDAY"] = 0] = "SUNDAY";
  Day[Day["MONDAY"] = 1] = "MONDAY";
  Day[Day["TUESDAY"] = 2] = "TUESDAY";
  Day[Day["WEDNESDAY"] = 3] = "WEDNESDAY";
  Day[Day["THURSDAY"] = 4] = "THURSDAY";
  Day[Day["FRIDAY"] = 5] = "FRIDAY";
  Day[Day["SATURDAY"] = 6] = "SATURDAY";
})(Day || (Day = {}));

This is the end of this article about TypeScript enumeration types. For more information about TypeScript enumeration types, 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!