Let’s talk about the usage of Enum (enumeration) in TypeScript

This article will introduce you to the Enum (enumeration) syntax in TypeScript, talk about the basic usage of Enum, and how to use native JavaScript to implement Enum.

Enum

Enum is a new syntax in TypeScript, also calledenumeration. It is generally used to manage multipleConstants of the same series(that is, variables that cannot be modified) are used for status judgment.

A common status judgment in the Web is to handle different response status codes accordingly when processing requests:

const handleResponseStatus = (status: number): void => { switch (status) { case 200: // 请求成功时 // Do something... break; case 400: // 请求失败时 // Do something... break; default: throw (new Error('No have status code!')); } };

But because the response status codes are all pre-defined , so there is no controversy. It is normal for the code to be written like this. However, if the backend customizes some codes when an error occurs on the server and tells the frontend what errors these codes represent, then the above function may become like this:

const handleWrongStatus = (status: string): void => { switch (status) { case 'A': // Do something... break; case 'B': // Do something... break; case 'C': // Do something... break; default: throw (new Error('No have wrong code!')); } };

If it’s this kind of code, let alone someone who just took over it, even if you wrote it two weeks ago, you probably won’t be able to remember what they represent without looking through the document.

But if you make good use of Enum, you can avoid the above situation.

Basic usage

Let’s first look at how to define Enum. It is very similar to Object in usage:

enum requestStatusCodes { error, success, }

There is no need to add an equal sign between the content and the name. Directly describe the variables in the Enum within the curly brackets. It is more appropriate to call them constants rather than variables. Because the values in the Enum cannot be modified, there is no need to worry about these defined rules being executed in the code. Changes occurred during the process, resulting in execution errors.

And since Enum is used to define the same series of constants, these constants should be able to maintain specific values. That's right, every constant in Enum can specify a specific value through=.

But if it is like the previousrequestStatusCodes, there will be no error if no specific value is specified forerrororsuccess, because TypeScript will start from0starts to automatically increment the defined value, so the signedrequestStatusCodeswill have the same result as the following:

enum requestStatusCodes { error = 0, success = 1, }console.log(requestStatusCodes.error) // 0 console.log(requestStatusCodes.success) // 1

In addition to numbers, it can also be defined as a string:

enum requestWrongCodes { missingParameter = 'A', wrongParameter = 'B', invalidToken = 'C', }console.log(requestWrongCodes.wrongParameter) // 'B'

Of course you can also set different types in one enum, but this makes no sense at all:

enum requestStatusCodes { error = 0, success = 'OK', }

After understanding how to define the basic Enum, then rewrite the ## in the previous code #handleResponseStatusandhandleWrongStatusto make them semantically clearer.

First use Enum to define the status descriptions of the two:

enum requestStatusCodes { error = 400, success = 200, } enum requestWrongCodes { missingParameter = 'A', wrongParameterType = 'B', invalidToken = 'C', }

Then modify the Switch judgment in

handleResponseStatusandhandleWrongStatus:

const handleResponseStatus = (status: number): void => { switch (status) { case requestStatusCodes.success: // Do something... break; case requestStatusCodes.error: // Do something... break; default: throw (new Error('No have status code!')); } }; const handleWrongStatus = (status: string): void => { // 如果觉得 requestWrongCodes.missingParameter 太长了，也可以用以下方式： const { missingParameter, wrongParameterType, invalidToken, } = requestWrongCodes; switch (status) { case missingParameter: // Do something... break; case wrongParameterType: // Do something... break; case invalidToken: // Do something... break; default: throw (new Error('No have wrong code!')); } };

The modified code becomes much more intuitive, because the status codes are all put into Enum for unified management, so they can be represented by constant names. No matter how long it takes, you can clearly know what to do here. There is no need to even write comments or documentation, because code is the best documentation.

Make good use of Enum to make your code absolutely indispensable, but don’t be discouraged even if you don’t use TypeScript, because TypeScript will eventually be converted to JavaScript, so let’s take a look at how to implement Enum directly in JavaScript!

Use native JavaScript to implement Enum

As mentioned before, Enum is very similar to Object. If you study the code after Enum is compiled into javascript, you will find that it is really Object.

After Enum is compiled, it will become an object corresponding to Key and Value. This seems very simple. For convenience of use, let’s write its compilation method as a function:

const newEnum = (descriptions) => { const result = {}; Object.keys(descriptions).forEach((description) => { result[result[description] = descriptions[description]] = description; }); return result; }; const responseStatus = newEnum({ error: 400, success: 200, }); // { '200': 'success', '400': 'error', error: 400, success: 200 } console.log(responseStatus);

Although The result obtained is the same, but the most valuable

constantfeature of Enum is lost. If it cannot be made unmodifiable, it may be inadvertently changed in the code, resulting in possible errors in the execution result. So you can useObject.freeze()at the end so that external operations cannot add, delete or redefine any Property:

const newEnum = (descriptions) => { const result = {}; Object.keys(descriptions).forEach((description) => { result[result[description] = descriptions[description]] = description; }); return Object.freeze(result); }; const responseStatus = newEnum({ error: 400, success: 200, }); // 即使不小心修改了 responseStatus['200'] = 'aaaaaaaa'; // 仍然是 { '200': 'success', '400': 'error', error: 400, success: 200 } console.log(responseStatus);

This way you can simply implement Enum in JavaScript.

Usage of const Enum

You can see from the previous JavaScript code that after compilation, Enum will become an Object with Key and Value corresponding to each other, that is to say, you can use Key or Value. Get the corresponding value,

But if you declare Enum withconst, Object will not be generated after compilation.

Looking directly at the example, suppose I regenerate

responseStatewithconst, and also use the Enum to make judgments withhandleResponseStatus:

enum responseStatus { error = 400, success = 200, } const handleResponseStatus = (status: number): void => { switch (status) { case responseStatus.success: console.log('请求成功！'); break; case responseStatus.error: console.log('请求失败！'); break; default: throw (new Error('No have status code!')); } };

Everything seems to be normal, but in the compiled JavaScript, you will find that Enum does not generate Object, but directly uses

constto declare the value in Enum.

There are several advantages to using

constto declare Enum:

• If there are a lot of Enums to be used, the execution will not stop. Using IIFE to generate Object and binding Key and Value to Object will cause some efficiency losses and increase memory, but

  constwill not generate Object, so there will be no above problems.

• 就算到的 Enum 不多，判断时也需要一直从 Object 中找出对应的值，而如果是用const声明 Enum ，在编译成 JS 时就将声明的值直接放入判断中。

不过这样也就没法从 Enum 中反向取值了，因为它并不会产生对象：

const enum responseStatus { error = 400, success = 200, }// 会出错，因为已经没有对象可供查找了 console.log(responseStatus[400])// 但这个不会有问题，因为编译的时候会直接填值 console.log(responseStatus.error)// 编译后： // console.log(400)

更多编程相关知识，请访问：编程入门！！

The above is the detailed content of Let’s talk about the usage of Enum (enumeration) in TypeScript. For more information, please follow other related articles on the PHP Chinese website!