Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "how to use Enum in TypeScript". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Enum

Enum is a new syntax in TypeScript, also known as enumeration, which is generally used to manage multiple constants of the same series (that is, variables that cannot be modified) for state judgment.

The common status judgment in Web is to deal with different response status codes when processing a request:

Const handleResponseStatus = (status: number): void = > {switch (status) {case 200: / / when the request is successful / / Do something... Break; case 40000: / / when a request fails / / Do something... Break; default: throw (new Error ('No have status codes'));}}

However, because the response status codes are predefined, there is no dispute, and it is normal for the code to be written this way, but if the back end customizes some coding when an error occurs on the server and tells the front end what the code represents, then the above function may look like this:

Const handleWrongStatus = (status: string): void = > {switch (status) {case'Aids: / / Do something... Break; case'Barrier: / / Do something... Break; case'Clearing: / / Do something... Break; default: throw (new Error ('No have wrong codes'));}}

If it's this kind of code, not to mention the person who just took over, even if you wrote it yourself two weeks ago, you probably won't remember what it means without going through the documents.

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

Basic usage

Let's first take a look at how to define Enum, which is very similar to the use of Object:

Enum requestStatusCodes {error, success,}

There is no need to add an equal sign between the content and the name, and it is more appropriate to describe which variables are in the Enum in curly braces rather than variables, because the values in Enum are immutable, so there is no need to worry that these defined rules will change during code execution, resulting in execution errors.

Since Enum is used to define the same series of constants, these constants should be able to maintain specific values. Yes, for every constant in Enum, you can specify a specific value by =.

However, if it is like the previous requestStatusCodes, there will be no error if you do not specify a specific value for error or success, because TypeScript will automatically increment the value from 0, so the signed requestStatusCodes will be the same as the following:

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

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

Enum requestWrongCodes {missingParameter = 'Aids, wrongParameter =' baked, invalidToken = 'cached,} console.log (requestWrongCodes.wrongParameter) / /' B'

Of course, you can set different types in an enum, but this doesn't make any sense:

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

Once you understand how the basic Enum is defined, then rewrite the handleResponseStatus and handleWrongStatus in the previous code to make them more semantically explicit.

First, use Enum to define the state description of both:

Enum requestStatusCodes {error = 400, success = 200,} enum requestWrongCodes {missingParameter = 'Aging, wrongParameterType =' baked, invalidToken = 'clocked,}

Then modify the Switch judgment in handleResponseStatus and handleWrongStatus:

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 codes));}}; const handleWrongStatus = (status: string): void = > {/ / if you think requestWrongCodes.missingParameter is too long, you can also use the following ways: 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 codes'));}}

The modified code becomes much more intuitive, because the status codes are uniformly managed in Enum, so they can be represented by constant names, and no matter how long it takes, you can clearly know what to do here, and you don't even have to write notes or documentation, because the code is the best document.

Making good use of Enum makes code absolutely indispensable, but don't lose heart even if you don't use TypeScript, because TypeScript will eventually be converted to JavaScript, so let's see how to implement Enum directly in JavaScript.

Implementing Enum with Native JavaScript

As I said earlier, Enum is very much like Object. If you study the code after Enum is compiled into javascript, you will find that it is really Object.

When Enum is compiled, it becomes an object corresponding to Key and Value in reverse. This looks very simple. For convenience, let's write its compilation as a function:

Const newEnum = (descriptions) = > {const result = {}; Object.keys (descriptions). ForEach ((description) = > {result [description] = alternatives [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 is the same, the most valuable constant feature in Enum is lost, and if it cannot be made immutable, it may be changed inadvertently in the code, resulting in possible errors in the execution result, so you can use Object.freeze () at the end to make external operations impossible to add, delete, or redefine any Property:

Const newEnum = (descriptions) = > {const result = {}; Object.keys (descriptions). ForEach ((description) = > {result [result] = description;}); return Object.freeze (result);}; const responseStatus = newEnum ({error: 400, success: 200,}); / / even if responseStatus ['200'] =' aaaaaaaa' is accidentally modified / / it is still {'200:' success', '400:' error', error: 400, success: 200} console.log (responseStatus)

This makes it easy to implement Enum in JavaScript.

The usage of const Enum

From the previous JavaScript code, you can see that when Enum is compiled, it becomes the Object corresponding to Key and Value, that is to say, the corresponding value can be extracted whether you use Key or Value.

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

Looking directly at the example, suppose I bring responseState back to life with const, and also judge by the fact that handleResponseStatus uses the Enum:

Enum responseStatus {error = 400, success = 200,} const handleResponseStatus = (status: number): void = > {switch (status) {case responseStatus.success: console.log ('request successful!') ; break; case responseStatus.error: console.log ('request failed!') ; break; default: throw (new Error ('No have status codes'));}}

Everything looks fine, but in the compiled JavaScript, you will find that Enum does not produce Object, but simply declares the value in Enum with const.

Declaring Enum with const has several benefits:

Assuming that you need to use a lot of Enum, you will constantly use IIFE to generate Object to bind Key and Value to Object, which will cause some loss of efficiency and increase memory, but const will not produce Object, so there will not be the above problems.

Even if there is not much Enum, the judgment needs to always find the corresponding value from the Object, and if the Enum is declared with const, the declared value will be put directly into the judgment when compiled into JS.

However, it is not possible to reverse the value from Enum, because it does not produce an object:

Const enum responseStatus {error = 400, success = 200,} / / will make an error, because there are no objects to find console.log (responseStatus [400]) / / but this will not be a problem, because the compilation will directly fill in the value console.log (responseStatus.error) / / after compilation: / / console.log (400) "how to use Enum in TypeScript" is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.