阅读 141

TypeScript枚举类型

这篇文章主要介绍了TypeScript枚举类型,所谓的枚举类型就是为一组数值赋予名字,下面我们来看看文章是怎么介绍的吧,需要的小伙伴也可以参考一下,希望对你有所帮助

目录
  • 1.概述

  • 2.数字枚举

    • 2.1反向映射

  • 3.字符串枚举

    • 4.const枚举

      • 5.总结

        1.概述

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

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

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

        1
        2
        3
        4
        5
        enum role{
            STUDENT,
            TEACHER,
            ADMIN
        }

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

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

        示例代码如下:

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        enum role1 {
            student = 1,
            // 后面两个值依次为2 3
            teacher,
            admin,
        }
        enum role2 {
            // 每个名具有指定的值
            student = 1,
            teacher = 3,
            admin = 6,
        }

        2.数字枚举

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

        示例代码如下:

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        ;(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。

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

        示例代码如下:

        1
        2
        3
        4
        5
        6
        7
        8
        enum role {
            student,
            teacher,
            admin,
        }
        console.log(role.admin) // 2
        console.log(role['teacher']) //1
        console.log(role[0]) //‘student'

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

        编译后的代码如下:

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

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

        1
        2
        3
        4
        5
        6
        7
        8
        var role = {
            "student": 0,
            "teacher": 1,
            "admin"  : 2,
            0: "student",
            1: "teacher",
            2: "admin",
        }

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

        3.字符串枚举

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

        示例代码如下:

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

        4.const枚举

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

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

        示例代码如下:

        1
        2
        3
        4
        5
        6
        const enum role {
            student,
            teacher,
            admin,
        }
        let admin = role.admin

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

        1
        let admin = 2 /* admin */;

        5.总结

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

        到此这篇关于TypeScript枚举类型的文章就介绍到这了

        原文链接:https://juejin.cn/post/7035978347272208414


        文章分类
        代码人生
        版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
        相关推荐