Typescript enumeration

Preface: This article is a TypeScript series of articles. Designed to use fragmented time to quickly get started with Typescript. Or to revisit old Typescript gaps. On the basis of the official API, add some impressions of daily use. If you are interested ~ welcome to pay attention to the follow-up continue to launch the article.

List of articles:

• TypeScript basic types
• Typescript enumeration
• 3. Typescript interfaces
• …

The directory structure

• Digital enumeration
• String enumeration
• Heterogeneous enumeration
• Constant enumeration
• Members of the enumeration
• Enumeration merger
• External enumeration
• conclusion

Digital enumeration

If there is no default value, the value starts from 0 and increases in ascending order

enum learn { 
    math,
    language,
    sports
}
console.log(learn.math) // 0 
console.log(learn.language) // 1
console.log(learn.sports) // 2
Copy the code

Specify initial values, in ascending order

enum learn { 
    math = 2,
    language,
    sports
}
console.log(learn.math) // 2 
console.log(learn.language) // 3
console.log(learn.sports) // 4
Copy the code

We print the value on the console and find the following object:

You can index an enumeration with either its value or its key value.

Let’s take a look at how typescript enumerations work

var learn;
(function (learn) {
    learn[learn["math"] = = 2]"math";
    learn[learn["language"] = = 3]"language";
    learn[learn["sports"] = = 4]"sports";
})(learn || (learn = {}));
Copy the code

Learn [“math”] = 2 learn[learn[“math”] = 2] = “math

Any syntax can be found on the website to see how it works

String enumeration

enum learn { 
    Success = 'success! ',
    Fail= 'failure'
}
Copy the code

Again, look at how the implementation works

var learn;
(function (learn) {
    learn[learn["math"] = = 0]"math";
    learn["Success"] = "\u6210\u529F!";
})(learn || (learn = {}));
Copy the code

In contrast to numeric enumeration, there is no reverse mapping, just plain assignment. There are only keys and values. The key value cannot be indexed by value.

Enumeration of strings, all members must be assigned as long as one of them is a string

enum learn {
   Success = 'success! ', Fail // error}Copy the code

Heterogeneous enumeration

Mixing string enumerations with numeric enumerations is not recommended

enum learn {
    math,
    Success = 'success! ',}Copy the code

Constant enumeration

It is important to note that many new to typescript often make the mistake of adding const to enums. As follows:

const enum E {
   X, Y, Z
}

function f(obj: { X: number }) {
   returnobj.X; } f(E); / / an errorCopy the code

Let’s look at the compiled code

function f(obj) {
    returnobj.X; } f(E); / / an errorCopy the code

Cause: Enums declared with const are deleted at compile time.

const enum learn { 
    math,
    language,
    sports
}
Copy the code

Empty after compiling:

We can use this method when we do not need an object, but need a value, which can reduce the runtime code as follows:

Members of the enumeration

1. Members are read-only and cannot be modified

Enum Learn {math = 2, language, sports} learn. Math = 2Copy the code

2. Enumerators can be constants or variables

Enum Learn {a, b = 2, c = 1 + 3, // expression e ='123'.length
}
Copy the code

3. Enumerations are objects that actually exist at run time and can be passed to objects to use

enum E {
    X, Y, Z
}
function f(obj: { X: number }) {
    returnobj.X; } f(E); / / 1Copy the code

Enumeration merger

Enumerations can be declared separately, and the results are automatically merged. The actual scenario is still recommended to write together, not recommended.

conclusion

This section takes a closer look at enumerated types. You learned about common enumerations and pit infestations. In the next section we’ll take a look at the Typescript interface, welcome to long-term serialization

The last

• Welcome to add my wechat (A18814127), pull you into the technology group, long-term exchange and learning
• Welcome to pay attention to “front-end plus”, seriously learn front-end, do a professional technical person