耀极客论坛

 找回密码
 立即注册
查看: 3339|回复: 0

TypeScript枚举类型

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-9 02:36:57 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了TypeScript枚举类型,所谓的枚举类型就是为一组数值赋予名字,下面我们来看看文章是怎么介绍的吧,需要的小伙伴也可以参考一下,希望对你有所帮助

1.概述

  所谓的枚举类型就是为一组数值赋予名字。
  enum类型在C++、Java语言中比较常见,TypeScript在JavaScript原有的类型基础上也增加了enum类型。
  比如我们需要定义一组角色,需要使用数字表示,就可以使用如下代码定位:
  1. enum role{
  2.     STUDENT,
  3.     TEACHER,
  4.     ADMIN
  5. }
复制代码
  上面代码中我们定义了role为一个枚举类型,这个里面有是三个值,TypeScript会为每个值自动的分配序号,默认从0开始依次排列,它们的值依次为0 1 2。
  当然我们也可以自定义每个值,如果非全部定义则后面的值会根据前面的值自增。
  示例代码如下:
  1. enum role1 {
  2.     student = 1,
  3.     // 后面两个值依次为2 3
  4.     teacher,
  5.     admin,
  6. }
  7. enum role2 {
  8.     // 每个名具有指定的值
  9.     student = 1,
  10.     teacher = 3,
  11.     admin = 6,
  12. }
复制代码
2.数字枚举

  我们上面介绍的例子就是数字枚举类型,但是还有一个注意点就是如果某个字段使用了常量或者计算后的值 ,我们就必须设置紧跟着字段的初始值 ,否则将会抛出异常。
  示例代码如下:
  1. ;(function () {
  2.   // 定义一个函数
  3.   const getValue: () => number = (): number => {
  4.     return 0
  5.   }
  6.   enum role1 {
  7.     student = getValue(),
  8.     // teacher, // error 枚举成员必须具有初始化表达式。
  9.     // admin, // error 枚举成员必须具有初始化表达式。
  10.   }
  11.   const TEACHER_ROLE: number = 3
  12.   // 每个名具有指定的值
  13.   enum role2 {
  14.     student,
  15.     teacher = TEACHER_ROLE,
  16.     // admin, // error 枚举成员必须具有初始化表达式。
  17.   }
  18. })()
复制代码
2.1反向映射

  所谓的反向映射就是可以通过key访问到value,通过value访问到key。
  我们可以通过.名称或者['名称']的方式取到每个具体的值,也可以通过[数值]的方式取到每个数值对应的名称,
  示例代码如下:
  1. enum role {
  2.     student,
  3.     teacher,
  4.     admin,
  5. }
  6. console.log(role.admin) // 2
  7. console.log(role['teacher']) //1
  8. console.log(role[0]) //‘student'
复制代码
  其实TypeScript中的枚举类型编译成JavaScript代码之后就是一个对象,我们将上面那个枚举类型编译一下,
  编译后的代码如下:
  1. "use strict";
  2. var role;
  3. (function (role) {
  4.     role[role["student"] = 0] = "student";
  5.     role[role["teacher"] = 1] = "teacher";
  6.     role[role["admin"] = 2] = "admin";
  7. })(role || (role = {}));
复制代码
  这样看我们可能好理解,其实就是通过一个自调函数将值赋值给role对象,赋值之后如下:
  1. var role = {
  2.     "student": 0,
  3.     "teacher": 1,
  4.     "admin"  : 2,
  5.     0: "student",
  6.     1: "teacher",
  7.     2: "admin",
  8. }
复制代码
  值得注意的是 反向映射仅仅支持在数字枚举 中,不支持在2.4版本中新增的字符串枚举 中。

3.字符串枚举

  所谓的字符串枚举就是枚举中的每个字段的值必须都是字符串,或者是枚举中的其他字段,
  示例代码如下:
  1. enum Person {
  2.   name = '一碗周',
  3.   hobby = 'coding',
  4.   // 设置枚举中的字段作为值
  5.   myName = name,
  6. }
  7. console.log(Person.name, Person.myName) // 一碗周 一碗周
复制代码
4.const枚举

  在我们定义了普通枚举之后,被编译成JavaScript代码之后会创建一个对应的对象,如果使用枚举是增了增加程序的可读性,且并不需要编译之后的对象。在TypeScript1.4中增加了const枚举。
  const枚举被翻译为完全嵌入枚举 ,所谓的完全嵌入枚举就是编译之后没有对应的对象,只是从枚举中拿到对应你的值然后进行替换。定义const枚举只需要在普通枚举前面加上const关键字。
  示例代码如下:
  1. const enum role {
  2.     student,
  3.     teacher,
  4.     admin,
  5. }
  6. let admin = role.admin
复制代码
  如上代码会被编译为如下:
  1. let admin = 2 /* admin */;
复制代码
5.总结

  这篇文章介绍了两种基本的枚举类型:数字枚举 和字符串枚举 ,数组枚举还有一个反射映射的概念,就是可以通过key访问value,通过value可以访问key;最后我们还介绍了const枚举,就是编译后不生成所谓的枚举对象。
  到此这篇关于TypeScript枚举类型的文章就介绍到这了,更多相关TypeScript枚举 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-10 03:21 , Processed in 0.069865 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表