Basic knowledge and examples of TypeScript enumeration

What is the enumeration in the directory preface TypeScript What should I pay attention to when using enumeration in TypeScript Types of common enumerations Enumeration reverse mapping Computing enumeration Summarize

Preface

Enumeration is a data type supported by TypeScript. Enumeration allows you to define 1 set of named constants. Use them to make it easier to record intentions or create 1 different set of cases. Enumerations are mostly used in object-oriented programming languages such as Java and C #, and can now be used in TypeScript as well. They are one of the few features of TypeScript, which is not a type-level extension of JavaScript. Next, I will demonstrate the basics of TypeScript enumeration, as well as use cases, various enumeration types, and the next steps of learning.

What is an enumeration in TypeScript

Many programming languages (such as C, C #, and Java) have the enum data type, while JavaScript does not. But TypeScript can, and TypeScript has number-based and string-based enumerations. The TypeScript enumeration allows developers to define 1 set of named constants. Use them to make it easier to record intentions or create 1 different set of cases.

The syntax for the enumeration is as follows:

enum States {
    Apple,
    Orange , 
    Banana , 
    Watermelon
}
//  Use 
var fruit = States.Watermelon;

What should I pay attention to when using enumeration in TypeScript

First, the values in the enumeration are constants, meaning that the enumeration is type-safe and returns a compilation error when the values are reassigned. Secondly, enumeration should be limited, which helps users create a custom constant system. Enumeration is an object after being compiled: create a memory-effective custom constant in JavaScript, and use it flexibly and easily to express the record intention as a judgment use case.

enum requestStatus {
    success = 200
    error = 400
}

let requestStatus;
(function (requestStatus) {
    requestStatus[requestStatus["success"] = 200] = "success"
    requestStatus[requestStatus["error"] = 400] = "error"
})(requestStatus || (requestStatus = {}));

// requestStatus:
// { '200': 'success', '400': 'error', error: 400, success: 200 }

Types of common enumerations

Numeric enumeration and string enumeration are the most commonly used enumeration types in TypeScript, and I will show you their characteristics and how to use them with examples below.

** Numeric enumeration

Numeric enumerations store numeric values as strings. Let's define them using the enum keyword. Below I will show the enumeration of numbers in TypeScript with an example of storing 1 set of different types of cars:

enum CarType {
    Honda,
    Toyota,
    Subaru,
    Hyundai
}

The enumeration value CarType has four values: Honda, Toyota, Subaru and Hyundai. The enumeration value starts at 0, and the value of each member is incremented by 1, as follows:

Honda = 0

Toyota = 1

Subaru = 2

Hyundai = 3

If necessary, you can initialize the first value yourself, as follows:

enum CarType {
    Honda = 1,
    Toyota,
    Subaru,
    Hyundai
}

In the above example, Honda initializes the first member with the value 1. The remaining numbers will be added by 1.

You may wonder, if I change the last 1 value, will the previous value decrease according to the last defined value? Let's try:

enum CarType {
    Honda,
    Toyota,
    Subaru,
    Hyundai = 100
}

Unfortunately, this doesn't work. The value of the current example is:

enum CarType {
    Honda,  // 1
    Toyota, // 2
    Subaru, // 3
    Hyundai // 100
}

Note: You do not have to assign order values to enumeration members. You can assign it any value you want

String enumeration

String enumerations are similar to numeric enumerations, but their enumeration values are initialized with string values instead of numeric values. String enumeration is more readable than numeric enumeration, which makes it easier to debug programs.

The following example uses the same information as the numeric enumeration example, but is represented as a string enumeration:

enum CarType {
    Honda = "HONDA",
    Toyota = "TOYOTA",
    Subaru = "SUBARU",
    Hyundai = "HYUNDAI"
}

//  Access string enumeration 
CarType.Toyota; //return TOYOTA

Note: String enumeration values need to be initialized separately.

Enumeration reverse mapping

Enumeration can use its corresponding enumeration member value to retrieve num value. Using reverse mapping, you can access the member value and the name of the member value. See the following example:

enum CarType {
    Honda = 1,
    Toyota,
    Subaru,
    Hyundai
}
CarType.Subaru; //return 3
CarType.["Subaru"]; //return 3
CarType[3]; //return Subaru

CarType [3] returns its member name "Subaru" due to reverse mapping. Let's look at another example:

enum CarType {
    Honda = 1,
    Toyota,
    Subaru,
    Hyundai
}
console.log(CarType)

You will see the following output in the console of your browser:

{
'1': 'Honda',
'2': 'Toyota',
'3': 'Subaru',
'4': 'Hyundai',
Honda: 1,
Toyota: 2,
Subaru: 3,
Hyundai: 4
}

Each value of the enumeration appears twice in the enumeration object stored internally.

Computing enumeration

The value of an enumeration member can be a constant value or a calculated value. Look at the following example:

enum requestStatus {
    success = 200
    error = 400
}

0

If the enumeration contains both calculated and constant members, the uninitialized enumeration member will appear first or possibly after other initialized members with numeric constants. The next 1 example displays errors:

enum requestStatus {
    success = 200
    error = 400
}

1

You can declare the above enumeration as follows:

enum requestStatus {
    success = 200
    error = 400
}

2

That's all of this article, by explaining what enumerations are and what we should pay attention to when using enumerations. To our commonly used enumeration types (numeric enumeration, string enumeration), enumeration reverse mapping, computed enumeration. I believe you have a certain understanding of enumeration

Summarize