TypeScript枚举类型

 更新时间:2021年12月09日 11:46:43   作者:一碗周  
这篇文章主要介绍了TypeScript枚举类型,所谓的枚举类型就是为一组数值赋予名字,下面我们来看看文章是怎么介绍的吧,需要的小伙伴也可以参考一下,希望对你有所帮助

1.概述

所谓的枚举类型就是为一组数值赋予名字。

enum类型在C++、Java语言中比较常见,TypeScriptJavaScript原有的类型基础上也增加了enum类型。

比如我们需要定义一组角色,需要使用数字表示,就可以使用如下代码定位:

enum role{
    STUDENT,
    TEACHER,
    ADMIN
}


上面代码中我们定义了role为一个枚举类型,这个里面有是三个值,TypeScript会为每个值自动的分配序号,默认从0开始依次排列,它们的值依次为0 1 2。

当然我们也可以自定义每个值,如果非全部定义则后面的值会根据前面的值自增。

示例代码如下:

enum role1 {
    student = 1,
    // 后面两个值依次为2 3
    teacher,
    admin,
}
enum role2 {
    // 每个名具有指定的值
    student = 1,
    teacher = 3,
    admin = 6,
}

2.数字枚举

我们上面介绍的例子就是数字枚举类型,但是还有一个注意点就是如果某个字段使用了常量或者计算后的值 ,我们就必须设置紧跟着字段的初始值 ,否则将会抛出异常。

示例代码如下:

;(function () {
  // 定义一个函数
  const getValue: () => number = (): number => {
    return 0
  }

  enum role1 {
    student = getValue(),
    // teacher, // error 枚举成员必须具有初始化表达式。
    // admin, // error 枚举成员必须具有初始化表达式。
  }
  const TEACHER_ROLE: number = 3
  // 每个名具有指定的值
  enum role2 {
    student,
    teacher = TEACHER_ROLE,
    // admin, // error 枚举成员必须具有初始化表达式。
  }
})()

2.1反向映射

所谓的反向映射就是可以通过key访问到value,通过value访问到key。

我们可以通过.名称或者['名称']的方式取到每个具体的值,也可以通过[数值]的方式取到每个数值对应的名称,

示例代码如下:

enum role {
    student,
    teacher,
    admin,
}
console.log(role.admin) // 2
console.log(role['teacher']) //1
console.log(role[0]) //‘student'

其实TypeScript中的枚举类型编译成JavaScript代码之后就是一个对象,我们将上面那个枚举类型编译一下,

编译后的代码如下:

"use strict";
var role;
(function (role) {
    role[role["student"] = 0] = "student";
    role[role["teacher"] = 1] = "teacher";
    role[role["admin"] = 2] = "admin";
})(role || (role = {}));


这样看我们可能好理解,其实就是通过一个自调函数将值赋值给role对象,赋值之后如下:

var role = {
    "student": 0,
    "teacher": 1,
    "admin"  : 2, 
    0: "student", 
    1: "teacher", 
    2: "admin", 
} 


值得注意的是 反向映射仅仅支持在数字枚举 中,不支持在2.4版本中新增的字符串枚举 中。

3.字符串枚举

所谓的字符串枚举就是枚举中的每个字段的值必须都是字符串,或者是枚举中的其他字段,

示例代码如下:

enum Person {
  name = '一碗周',
  hobby = 'coding',
  // 设置枚举中的字段作为值
  myName = name,
}
console.log(Person.name, Person.myName) // 一碗周 一碗周

4.const枚举

在我们定义了普通枚举之后,被编译成JavaScript代码之后会创建一个对应的对象,如果使用枚举是增了增加程序的可读性,且并不需要编译之后的对象。在TypeScript1.4中增加了const枚举。

const枚举被翻译为完全嵌入枚举 ,所谓的完全嵌入枚举就是编译之后没有对应的对象,只是从枚举中拿到对应你的值然后进行替换。定义const枚举只需要在普通枚举前面加上const关键字。

示例代码如下:

const enum role {
    student,
    teacher,
    admin,
}
let admin = role.admin

如上代码会被编译为如下:

let admin = 2 /* admin */;


5.总结

这篇文章介绍了两种基本的枚举类型:数字枚举 和字符串枚举 ,数组枚举还有一个反射映射的概念,就是可以通过key访问value,通过value可以访问key;最后我们还介绍了const枚举,就是编译后不生成所谓的枚举对象。

到此这篇关于TypeScript枚举类型的文章就介绍到这了,更多相关TypeScript枚举 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 微信小程序 循环及嵌套循环的使用总结

    微信小程序 循环及嵌套循环的使用总结

    这篇文章主要介绍了微信小程序 循环及嵌套循环的使用总结的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
    2017-09-09
  • js基础语法与maven项目配置教程案例

    js基础语法与maven项目配置教程案例

    本篇文章介绍了几个javascript的基本语法和maven的配置教程。想学习javascript和maven的朋友们可以参考一下,希望能给你带来帮助
    2021-07-07
  • vscode工具函数Symbol使用深入解析

    vscode工具函数Symbol使用深入解析

    这篇文章主要为大家介绍了vscode工具函数Symbol使用深入解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 前端Website sitemap.xml文件搜索引擎优化

    前端Website sitemap.xml文件搜索引擎优化

    这篇文章主要为大家介绍了前端Website的sitemap.xml文件和搜索引擎优化实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • quickjs 封装 JavaScript 沙箱详情

    quickjs 封装 JavaScript 沙箱详情

    这篇文章主要介绍了 quickjs 封装 JavaScript 沙箱,在前文 JavaScript 沙箱探索 中声明了沙箱的接口,并且给出了一些简单的执行任意第三方 js 脚本的代码,但并未实现完整的 IJavaScriptShadowbox,下面便讲一下如何基于 quickjs 实现,需要的朋友可以参考一下
    2021-10-10
  • 微信小程序 教程之列表渲染

    微信小程序 教程之列表渲染

    这篇文章主要介绍了微信小程序 列表渲染的相关资料,并附简单代码实例,需要的朋友可以参考下
    2016-10-10
  • TypeScript中extends的正确打开方式详解

    TypeScript中extends的正确打开方式详解

    这篇文章主要为大家介绍了TypeScript中extends的正确打开方式详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • JS中轻松遍历对象属性的几种方式

    JS中轻松遍历对象属性的几种方式

    这篇文章主要给大家介绍的是JS中轻松遍历对象属性的几种方式,文章从自身可枚举属性、Object.values() 返回属性值、Object.entries()来展开介绍,感兴趣的小伙伴可以参考一下
    2021-09-09
  • ECharts框架分段视觉映射在移动端适配

    ECharts框架分段视觉映射在移动端适配

    这篇文章主要介绍了ECharts框架分段视觉映射在移动端适配详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • JS中 querySelector 与 getElementById 方法区别

    JS中 querySelector 与 getElementById 方法区别

    这篇文章主要介绍了JavaScript中 querySelector 与 getElementById 方法与区别,围绕querySelector 与 getElementById 的相关资料展开文章内容,需要的朋友可以参考一下
    2021-10-10

最新评论