聊聊TypeScript中Enum(枚举)的用法


本文摘自PHP中文网,作者青灯夜游,侵删。

本篇文章给大家介绍一下TypeScript中Enum(枚举)语法,聊聊Enum的基本用法,如何使用原生JavaScript来实现Enum。

Enum

Enum 是在 TypeScript 中新增的语法,也叫做枚举,一般用它来管理多个相同系列的常量(即不能被修改的变量),用于状态的判断。

在 Web 中比较常见的状态判断,是在处理请求时,要针对不同的响应状态码做对应的处理:

1

2

3

4

5

6

7

8

9

10

11

12

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!'));

  }

};

但因为响应状态码都是预先定义好的,所以没什么争议,代码写成这样看也很正常,但是如果后端在服务器发生错误时自定义了一些编码,并告诉前端,这些代码都代表什么错误,那么上面的函数可能会变成这样:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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!'));

  }

};

如果是这种代码,别说是刚接手的人,就算是你自己两星期前写的,恐怕不去翻文档也想不起它们都代表什么了吧。

但是如果善用 Enum ,就可以避免上述发生的情况。

基本用法

先来看看 Enum 该怎么定义,它和 Object 的用法很像:

1

2

3

4

enum requestStatusCodes {

  error,

  success,

}

不需要在内容与名称之间加等号,直接在大括号内叙述该 Enum 中具有哪些变量,与其说是变量,不如说是常量更恰当些,因为在 Enum 中的值是不可修改的,所以也不必担心这些定义好的规则会在代码执行的过程中发生改变,导致执行错误。

而既然 Enum 是用来定义同一个系列常量的,那这些常量应该都能维护特定的值。没错,在 Enum 中的每个常量,都可以通过 = 来指定具体的值 。

但如果是像前面的 requestStatusCodes ,没有为 errorsuccess 指定具体的值也不会出错,因为 TypeScript 会从 0 开始自动递增定义值,所以签名的 requestStatusCodes 会和下面的结果相同:

1

2

3

4

5

enum requestStatusCodes {

  error = 0,

  success = 1,

}console.log(requestStatusCodes.error) // 0

console.log(requestStatusCodes.success) // 1

除了数字外,也可以定义为字串:

1

2

3

4

5

enum requestWrongCodes {

  missingParameter = 'A',

  wrongParameter = 'B',

  invalidToken = 'C',

}console.log(requestWrongCodes.wrongParameter) // 'B'

当然也可以在一个 enum 中设定不同的类型,但这样一点意义都没有:

1

2

3

4

enum requestStatusCodes {

  error = 0,

  success = 'OK',

}

了解基本的 Enum 怎么定义后,接着就来改写前面代码中的 handleResponseStatushandleWrongStatus ,让它们在语义上能够更明确。

首先用 Enum 定义两者的状态描述:

1

2

3

4

5

6

7

8

9

10

enum requestStatusCodes {

  error = 400,

  success = 200,

}

 

enum requestWrongCodes {

  missingParameter = 'A',

  wrongParameterType = 'B',

  invalidToken = 'C',

}

然后修改 handleResponseStatushandleWrongStatus 中的 Switch 判断:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

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!'));

  }

};

修改后的代码就变得直观多了,因为状态码都被放到了 Enum 中统一管理,所以就能用常量名来代表它们,之后不管过了多久,可以明确的知道这里再做什么,甚至连注解或文档都不用写了,因为代码就是最好的文档。

阅读剩余部分

相关阅读 >>

javascript中怎么换行

javascript字符串怎么替换所有字符

javascript的this的用法详解

彻底弄懂javascript执行机制

javascript逻辑运算符有哪些

python为什么像javascript

javascript字符串怎么替换字符

javascript是前端吗

javascript在nodejs环境下执行机制和事件循环

javascript实现无限级递归树的代码示例

更多相关阅读请进入《javascript》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...