Enumeration objects in TypeScript

preface

What is an enumeration? As the name suggests, when we see the word enumeration, we already think of it as a key-value pair, just like we think of json objects in JavaScript. The key to declaring an enumeration in TS is to use enums, which are immutable once defined. Let’s take a look at enumerations in TS.

Digital enumeration

Let’s start with enumerations. We can see at a glance that all enumerations are of type number. Let’s look at creating a simple enumerated object.

enum device {
    phone,
    notebook,
    desktop
}

console.log(device.phone) / / 0
Copy the code

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

As long as an enumeration object is defined, no value is assigned by default, so the value of the first enumeration object in the current enumeration increases from 0.

Look at the chestnuts

enum device {
  phone = 3,
  notebook,
  desktop
}
Copy the code

The default value for phone is 3, so the following two values will be incrementing by default to notebook = 4 and desktop = 5.

Note – Enumeration objects are incremented

• Enumeration object members increment by 1
• Enumerator members are incremented only to see if the previous enumerator of the current value has a value, which is then incremented. Independent of the first enumerator value

There is a reverse mapping for numeric enumeration objects

enum device {
      phone
      notebook,
      desktop
}
Copy the code

Device. notebook = 1. However, the notebook can also be obtained by device[1] because there is a reverse mapping (key and value can access each other).

Note that only numeric enumerators have reverse mappings, not strings or other values.

Take a look at the compiled enumeration object

Let’s do another problem

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

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

You can see that in the code above, device.phone = 2, and then we use the reverse approach to access device[2] but desktop. This is because by default we assign phone a value of 2, and then we assign notebook a value of 1, and desktop is incremented by the previous enumerator, so 2 is replaced by desktop.

Note that ts is a duplicate value that will not be checked out.

String enumeration

If you look at string enumerations, you can see that string enumerators must all be strings. There is no reverse mapping of string enumeration objects.

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

Let’s take a look at the compiled code

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

String enumerations are not incremented, and the current enumerator is preceded by a string, so the current enumerator will report an error if it does not assign a value.

enum device {
    phone = "1",
    notebook
}
Copy the code

This would cause an error at compile time. An enumerator must have an initialization expression, “we’ll talk about expressions for enumerators in a moment.

Heterogeneous enumeration

An enumeration object can contain both numeric enumerators and string enumerators. But if we’re serious about using enumerations, we don’t really use heterogeneous enumerations, as the documentation says, it doesn’t seem like you’re going to do that.

enum Person {
    name = "Front-end entertainment.",
    age = 18
}
Copy the code

Looking at a chestnut

enum Person {
    name = "Front-end entertainment.",
    age = 3 * 6
}
Copy the code

Enumerations with string values are not allowed in enumerations. Enumerations with string values are not allowed in enumerations with string values. But you can write directly. Now we’re going to talk about calculations

Computed and constant members

Enumeration members in an enumeration object take a value, which is either computed or constant. So how do you see if it’s computed or constant. This brings us to the enumeration object member expression, which is always a constant or it’s evaluated. So you only need to know that an enumerator is an expression to know that it is a constant.

It is an expression if one of the following conditions is satisfied. The following are official rules and conditions

• An enumerated expression literal (mainly a string literal or a number literal)
• A reference to a previously defined constant enumerator (which can be defined in a different enumeration type)
• A bracketed constant enumeration expression
• Unary operator+.-.~One of them applies to constant enumeration expressions
• Constant enumeration expressions as binary operators+.-.*./.%.<<.>>.>>>.&.|.^Operation object of. If the constant enumeration expression is evaluatedNaNorInfinity, an error is reported at compile time.

Once these conditions are true, the current enumerator is a constant. Constants can be evaluated at compile time

constant

enum obj {
    index, // Meet the condition constant
    index1 = index, // Meet the condition constant
    age = 2 << 1.// Meet the condition constant
    num = 30 | 2.// Meet the condition constant
    num1 = 10 + 29 // Meet the condition constant
}
Copy the code

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

Calculation of the

enum obj {
    nameLen = "Front-end entertainment.".length, / / calculation
    num = Math.random() * 100 / / calculation
}
Copy the code

There is no evaluation in the compiled code after looking at the calculation.

Const enumeration

In general, common enumeration object can satisfy my needs, but in some cases such as in order to save additional overhead and performance, we can choose to use constants enumeration, constant enumeration using the const keyword definition, it is different from ordinary enumeration, it will delete the object at compile phase, and can not access the enumeration object, members can only access the enumeration object. The members of a constant enumeration must be constant enumeration expressions, not computed values

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

console.log(obj) / / an error
Copy the code

Note that the above constant enumeration object is also “empty” after the compilation, the system automatically deletes the object

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
Copy the code

So the chestnuts above will only see console.log values when compiled.

External enumeration

The external enumeration is used to describe the shape of an existing enumeration type. This means that the external enumeration is used to describe enumeration objects that exist in the current environment. One difference between an external enumeration and a normal enumeration is that an uninitialized enumeration member in an external enumeration is treated as a calculated value, whereas an ordinary enumeration member is treated as a constant.

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

console.log(Enum);
console.log(Enum.A)
Copy the code

After the above execution, you will find that either the enumeration itself or the members of the enumeration are executed with an error, “Enum is not defined”. Because the external enumerations are compiled without being generated at all. So have understand the use of external enumeration small partners to answer, thank you ~

The type of an enumerator

An enumerator can also be treated as a type by specifying that the value of some variable must be the value of an enumerator.

An enumerator must meet one of these conditions to be a type

• A literal enumerator is a constant enumerator with no initial value
• Any string literal (e.g.A,B)
• Any numeric literal (e.g.1.100)
• Apply unary-The numeric literal of a symbol (e.g.- 1.- 100.)

enum obj {
    name = "Front-end entertainment.",
    num = -100
}

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

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

Thank you

Thank you for reading, if there is help please click a concern, favorites bar

Feel helpful can pay attention to the front end of the entertainment industry public number, every day for you to push a little knowledge

We can also add my wechat to make a friend, you can chat with me or pull you into the technical exchange group