Talk about enumeration objects in TypeScript (Enum)

Preface

What is an enumeration? As the name suggests, when we see the word enumeration, we have already thought that this is a key-value pair form, which can be regarded as the json object JavaScript The key to declare the enumeration object in ts is to use enum . Once the enumeration member is defined, it cannot be changed. Let's introduce the enumeration object in ts.

Number enumeration

Let's first about the 1616943240ca4c number enumeration, at a glance, you can see that the members of the number enumeration are all of type number Let's take a look at creating a simple enumeration object.

enum device {
    phone,
    notebook,
    desktop
}

console.log(device.phone) // 0

The above values are phone 0, notebook 1, desktop 2.

As long as the enumeration object is defined and no value is assigned by default, the value of the first one in the current enumeration object is incremented from 0.

Look at the chestnuts below

enum device {
  phone = 3,
  notebook,
  desktop
}

Above we assign a value of 3 phone default, then the following two values will also increase by default and become notebook = 4 and desktop = 5 .

Note-Enumeration object increments

• The member of the enumeration object is incremented by 1
• The member increment of an enumeration object will only see whether the previous enum member of the current value has a value, and if there is a value, it will be incremented in turn. Has nothing to do with the first enumeration member value

Digital enumeration objects will have reverse mapping

enum device {
      phone
      notebook,
      desktop
}

From the above chestnuts, we can know that device.notebook = 1 . But you can also get device[1] through notebook , this is because there is a reverse mapping (key and value can access each other).

It should be noted that only numeric enumeration members will have reverse mapping, not strings or other values.

Let's take a look at the compiled enumeration object

<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fd33df8cc99f4517907ffa807af4f973~tplv-k3u1fbpfcp-watermark.image" width="100%"/>

Let's look at another question

enum device {
    phone = 2,
    notebook = 1,
    desktop
}

console.log(device.phone) // 2
console.log(device[2]) // desktop

You can see that in the above code, device.phone = 2 , and then we use the reverse way to access device[2] but it is desktop . This is because by default we assign phone to 2 , and then assign notebook 1 . At this time, desktop with the value of the previous enumeration member (notebook), so at this time, 2 has been replaced with desktop .

It should be noted here to avoid stepping on the pit, ts is a duplicate value that will not be checked.

String enumeration

After reading the number enumeration above, and then looking at the string enumeration, it is obvious that the values of the string enumeration members must all string type 0616943240cdec. There is no reverse mapping for string enumeration objects.

enum device {
    phone = "1",
    notebook = "2",
    desktop = "3"
}

Let's take a look at the compiled code

<img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bc0e79c440bf4efc99c404019ea3abed~tplv-k3u1fbpfcp-watermark.image" width="100%"/>

You can see that the compiled code above has no reverse mapping code.

String enumeration is not incremented. The previous value of the current enumeration member is a string. If the current enumeration object is not assigned a value, an error will be reported.

enum device {
    phone = "1",
    notebook
}

The above situation will cause an error in the compilation phase. "Enumeration members must have initialization expressions", we will talk about the expression of the enumeration object later.

Heterogeneous enumeration

What is heterogeneous enumeration? To put it bluntly, an enumeration object can include numeric enumeration members and string enumeration members, which can be mixed. But if we want to use enumeration objects seriously, we generally don't use heterogeneous enumerations. As the documentation says, it seems that you don't do this.

enum Person {
    name = "前端娱乐圈",
    age = 18
}

Looking at a chestnut

enum Person {
    name = "前端娱乐圈",
    age = 3 * 6
}

The above will report an error, "calculated values are not allowed in enumerations containing string value members". If the enumeration object members have strings, you cannot set other enumeration object members to the value calculated by 6). But it can be written directly. Below we will talk about the calculation

Calculated and constant members

Enumeration object enumeration members are presented with a value that is calculated or constant. So how do you think it is calculated or constant. This talks about the enumeration object member expression we mentioned above. As long as it is an expression, it must be a constant otherwise it is calculated by . So you only need to know that the enumeration member is an expression to know that it is a constant.

When one of the following conditions is met then it is an expression. The following borrows the official rules and conditions

• An enumeration expression literal (mainly string literal or numeric literal)
• A reference to a previously defined constant enumeration member (can be defined in different enumeration types)
• Parenthesized constant enumeration expression
• One of the unary operators + , - , ~ applied to constant enumeration expressions
• Constant enumeration expressions are the operation + binary operators 0616943240d10c, - , * , / , % , << , >> , >>> , & , | , ^ . If the constant enumeration expression is evaluated as NaN or Infinity , an error will be reported during the compilation phase.

After the above conditions are met, the current enumeration member is a constant. Constants can be evaluated during compilation

constant

enum obj {
    index, // 满足条件 常量
    index1 = index, // 满足条件 常量
    age = 2 << 1, // 满足条件 常量 
    num = 30 | 2, // 满足条件 常量
    num1 = 10 + 29 // 满足条件 常量
}

Looking at the compiled code above, you can see that it is evaluated directly at the compilation stage.

<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/42beb700d9cd4d0a81d756d12384910b~tplv-k3u1fbpfcp-watermark.image" width="100%"/>

computational

enum obj {
    nameLen = "前端娱乐圈".length, // 计算的
    num = Math.random() * 100 // 计算的
}

Looking at the calculated compiled code, it is not evaluated.

<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b517b83eba894ce88c1973b77478f37f~tplv-k3u1fbpfcp-watermark.image" width="100%"/>

const enum

Under normal circumstances, ordinary enumeration objects can meet my needs, but in some cases, for example, in order to save additional overhead and performance, we can choose to use constant enumeration. Constant enumeration is const , which is different from ordinary enumeration. , It will delete the object during the compilation phase, and cannot access the enumeration object, only the members of the enumeration object. Constant enumeration members can only be constant enumeration expressions, and calculated values cannot be used

const enum obj {
    A = 1,
    B = 3 * 6,
    C = 1 & 2
}

console.log(obj) // 报错

It should be noted that the compiled object of the constant enumeration object above is also "empty", and the system automatically deletes it

const enum obj {
    A = 1,
    B = 3 * 6,
    C = 1 & 2
}

console.log(obj.A) // 1
console.log(obj.B) // 8
console.log(obj.C) // 0

Then the above chestnut can only see the values of console.log

<img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c34317c5a0c54d8a8ac34f9823c16a21~tplv-k3u1fbpfcp-watermark.image" width="100%"/>

External enum

The external enumeration is declare . The document description: The external enumeration is used to describe the shape of the existing enumeration type, which means that the external enumeration is used to describe the enumeration object existing in the current environment. One difference between an external enumeration and a normal enumeration is that the enumeration member that is not initialized in the external enumeration will be treated as a calculated value, while in the normal enumeration it will be a constant.

declare enum Enum {
    A = 1,
    B,
    C = 2
}

console.log(Enum);
console.log(Enum.A)

After the above execution, you will find that no matter whether the enumeration itself or the enumeration member is executed, an error is reported, "Enum is not defined". Because the external enumeration is not generated at all after compilation. So there are friends who understand the use of external enumerations to answer, thank you~

Enumeration member type

Enumeration members can also be regarded as a type, that is, you can specify that the value of certain variables must be the value of the enumeration member.

Enumeration members must meet one of the conditions to become a type

• A literal enumeration member refers to a constant enumeration member without an initial value
• Any string literal (such as: A , B )
• Any number literal (such as: 1 , 100 )
• A number literal with the one-yuan - -1 , -100 )

enum obj {
    name = "前端娱乐圈",
    num = -100
}

interface msg {
    title: obj.name;
    num: obj.num
}

let json: msg = {
    title: obj.name,
    num: obj.num
}

grateful

Thank you for reading, if you have any help, please pay attention and bookmark it

If you think it is helpful, you can follow the front-end entertainment circle public account, and push a little knowledge for you every day

You can also add me WeChat make friends, you can chat with me or pull you into the technical exchange group