TypeScript【enum 枚举】

导语

在 TypeScript 中,新增了很多具有特性的一些数据类型处理方法,enum 【枚举】就是其中,很具有代表性的一种,所以本章节就来聊聊 在 TypeScript 中如何去运用 enum 【枚举】


在这里插入图片描述

枚举的概念

枚举(Enum)类型用于取值被限定在一定范围内的场景,比如一周只能有七天,颜色限定为红绿蓝等。

枚举使用 enum 关键字来定义:

enum DaysDataType {Sun,Mon,Tue,Wed,Thu,Fri,Sat
};
console.log(DaysDataType);

默认赋值【自动赋值】

枚举成员默认值会被赋值为从 0 开始递增的索引数字,同时也会对枚举值到枚举名进行反向映射

上面输出打印 枚举 DaysDataType:

在这里插入图片描述

上面声明的枚举,最后被编译为 JS 后,会呈现以下的样式。

在这里插入图片描述


手动赋值

我们也可以给枚举项手动赋值

enum DaysDataType {Sun = 7,Mon = 14,Tue = 21,Wed = 54,Thu,Fri,Sat
};
console.log(DaysDataType);

手动赋值后,再次注意看编译后的内容:
在这里插入图片描述

console.log(DaysDataType["Sun"] == 7); //true
console.log(DaysDataType["Mon"] == 14);//true
console.log(DaysDataType["Tue"] == 21);//true
console.log(DaysDataType["Wed"] == 54);//true
console.log(DaysDataType["Thu"] == 55);//true
console.log(DaysDataType["Fri"] == 56);//true
console.log(DaysDataType["Sat"] == 57);//true

上面案例可以看出,未手动赋值的枚举项会接着上一个枚举项的值进行递增

注意:如果手动赋值的为 number 类型的值,下一位如果没有手动赋值则会在上一次的基础上递增。并且所赋值的数字可以被用做数组的下标索引的方式来读取数据,赋值非number类型的不支持通过下标读取

如:

enum DaysDataType {Sun = "789",Mon = 4546,Tue = "415",Wed = "asd",Thu = "asdasd",Fri = 41,Sat = "asddf"
};
console.log(DaysDataType);
console.log(DaysDataType[4546]); //Mon
console.log(DaysDataType[41]); //Fri

截止目前TS 枚举手动赋值仅支持 numberstringnullundefined,不支持 Boolean
在这里插入图片描述


值得注意
如果未手动赋值的枚举项与手动赋值的重复了,TypeScript 是不会察觉到这一点的,它会进行一个 后来居上的覆盖处理:

enum DaysDataType {Sun = 7,Mon = 14,Tue = 21,Wed = 54,Thu = 13,Fri,     //14 根据前枚举项 递增,会覆盖掉前面 Mon 的14。Sat  //15
};
console.log(DaysDataType[7] == "Sun"); //trueconsole.log(DaysDataType[14] == "Mon");        //false  被 Fri  覆盖掉了,丢失了唯一性。console.log(DaysDataType[21] == "Tue"); //true
console.log(DaysDataType[54] == "Wed"); //true
console.log(DaysDataType[13] == "Thu"); //true
console.log(DaysDataType[14] == "Fri"); //true    // Fri 覆盖掉了 Mon
console.log(DaysDataType[15] == "Sat"); //true

在这里插入图片描述

所以使用的时候需要特别注意,尽量避免出现 数据覆盖的情况。

当然:手动赋值的枚举项不仅仅可以不是数字类型,此时需要使用类型断言来让 tsc 无视类型检查 (编译出的 js 仍然是可用的)

enum DaysDataType {Sun = 7,Mon = 14,Tue = 21,Wed = 54,Thu = 13,Fri,Sat = <any>"张三"  //类型断言
};

同时,手动赋值的枚举项也可以为小数或负数此时后续未手动赋值的项的递增步长仍为 1

enum DaysDataType {Sun = 1.5,Mon,Tue,Wed,Thu,Fri,Sat 
};
console.log(DaysDataType);

在这里插入图片描述


枚举的常数项和计算所得项

枚举项有两种类型:常数项(constant member)和计算所得项(computed member)

前面我们所举的例子都是 常数项,那么 计算所得项又是什么呢?如下案例:

enum Color {Red, Green, Blue = "blue".length};

案例中 Blue 的值是通过 一个字符串的 length 计算而得来的。这种就被称为计算所得项。

注意
如果紧接在计算所得项后面的是未手动赋值的项,那么它就会因为无法获得初始值而报错


常数枚举:

常数枚举是使用 const enum 定义的枚举类型

const enum Directions {Up,Down,Left,Right
}let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right]; // let directions = [0 /* Directions.Up */, 1 /* Directions.Down */, 2 /* Directions.Left */, 3 /* Directions.Right */];

常数枚举与普通枚举的区别是,它会在编译阶段被删除,并且不能包含计算所得项的枚举成员。主要作用是在编译阶段进行类型检查。
在这里插入图片描述


外部枚举

外部枚举(Ambient Enums)是使用 declare enum 定义的枚举类型。

declare  enum Directions {Up,Down,Left,Right
}let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];//let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

declare 定义的类型只会用于编译时的检查,编译结果中会被删除

同时使用 declare const 也是可以被支持的

declare const enum Directions {Up,Down,Left,Right
}let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

编译后:

var directions = [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];

总结:

本章节,主要介绍了在 TypeScript 中 如何应用 enum 【枚举】的使用场景,以及使用枚举的多种定义方式。提供给大家参考学习。


🚵‍♂️ 博主座右铭:向阳而生,我还在路上!
——————————————————————————————
🚴博主想说:将持续性为社区输出自己的资源,同时也见证自己的进步!
——————————————————————————————
🤼‍♂️ 如果都看到这了,博主希望留下你的足迹!【📂收藏!👍点赞!✍️评论!】
——————————————————————————————

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/21029.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

yolov3-tiny原理解析及代码分析

前言 从去年十一月份开始学习yolo神经网络用于目标识别的硬件实现&#xff0c;到现在已经六个月了。一个硬件工程师&#xff0c;C/C基础都差劲的很&#xff0c;对照着darknet作者的源码和网上东拼西凑的原理讲解&#xff0c;一点一点地摸索。刚开始进度很慢&#xff0c;每天都…

汽车EBSE测试流程分析(四):反思证据及当前问题解决

EBSE专题连载共分为“五个”篇章。此文为该连载系列的“第四”篇章&#xff0c;在之前的“篇章&#xff08;三&#xff09;”中已经结合具体研究实践阐述了“步骤二&#xff0c;通过系统调研确定改进方案”等内容。那么&#xff0c;在本篇章&#xff08;四&#xff09;中&#…

怎么维护好自己的电脑

你的电脑已经成为你工作、学习、娱乐的最佳工具之一&#xff0c;但是如果你不做好电脑维护工作&#xff0c;就可能面临着电脑变慢、蓝屏、崩溃等问题。在这篇文章中&#xff0c;我们将介绍10个电脑维护步骤&#xff0c;让你的电脑更加稳定&#xff01; 为什么需要电脑维护&…

2023年华数杯数学建模B题思路代码分析 - 不透明制品最优配色方案设计

# 1 赛题 B 题 不透明制品最优配色方案设计 日常生活中五彩缤纷的不透明有色制品是由着色剂染色而成。因此&#xff0c;不透明 制品的配色对其外观美观度和市场竞争力起着重要作用。然而&#xff0c;传统的人工配色 存在一定的局限性&#xff0c;如主观性强、效率低下等。因此…

PyTorch Lightning教程六:优化代码

有时候模型训练很慢&#xff0c;代码写得冗长之后&#xff0c;没法诶个检查到底那块出现了占用了时空间&#xff0c;本节通过利用Lightning的一些方法&#xff0c;检查分析是那块代码出现了问题&#xff0c;从而来进一步指导和优化代码 本节主要基于性能分析方法&#xff0c;通…

基于yolo v5与Deep Sort进行车辆以及速度检测与目标跟踪实战

项目实验结果展示&#xff1a; 基于yolo v5与Deep Sort进行车辆以及速度检测与目标跟踪实战——项目可以私聊 该项目可以作为毕业设计&#xff0c;以及企业级的项目开发&#xff0c;主要包含了车辆的目标检测、目标跟踪以及车辆的速度计算&#xff0c;同样可以进行二次开发。 …

vscode vue3开发常用插件(附Prettier格式化配置)

必不可少插件(名称可能不全)&#xff1a; 1、Chinese (Simplified) (简体中文) Language 2、Prettier - Code formatter 3、Vue 3 Snippets 4、Vue Language Features (Volar) 可选插件&#xff1a; 5、Auto Close Tag 6、Vue Theme Prettier格式化配置&#xff1a; 按ctr…

多个网关中的统一异常处理类

存在多个网关情况下&#xff0c;可以把统一异常处理类&#xff0c;写在common包里。 因为common包里没有主启动类&#xff0c;所以需要利用springboot自动装配原理&#xff0c;来使统一异常处理类生效。 1.在common包中创建统一异常处理类&#xff0c;如GlobalExceptionHandle…

Docker Dockerfile 语法与指令

一、简介 Docker 镜像原理、容器转成镜像 随便找个案例&#xff0c;进入 https://hub.docker.com/ 搜索 centos&#xff0c;然后随便找个版本&#xff08;例如&#xff1a;centos7&#xff09;点击一下&#xff0c;就会进入 centos7 的 dockerfile 文件&#xff1a; // 空镜像…

基于 Redux + TypeScript 实现强类型检查和对 Json 的数据清理

基于 Redux TypeScript 实现强类型检查和对 Json 的数据清理 突然像是打通了任督二脉一样就用了 generics 搞定了之前一直用 any 实现的类型…… 关于 Redux 的部分&#xff0c;这里不多赘述&#xff0c;基本的实现都在这里&#xff1a;Redux Toolkit 调用 API 的四种方式 和…

【Leetcode】73.矩阵置零

一、题目 1、题目描述 给定一个 m x n 的矩阵,如果一个元素为 0 ,则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 示例1: 输入:matrix = [[1,1,1],[1,0,1],[1,1,1]] 输出:[[1,0,1],[0,0,0],[1,0,1]]示例2: 输入:matrix = [[0,1,2,0],[3,4,5,2],[1,3,1…

设计模式九:组合模式(Composite Pattern)

组合模式是一种结构型设计模式&#xff0c;它允许我们将对象组合成树形结构来表示“整体-部分”层次关系。组合模式使得用户可以以相同的方式处理单个对象和组合对象。 在组合模式中&#xff0c;有两种主要类型的对象&#xff1a;叶子对象和组合对象。叶子对象代表树结构中的最…

vscode 插件::EIDE

最新最全 VSCODE 插件推荐&#xff08;2023版&#xff09;_vscode_白墨石-华为云开发者联盟 (csdn.net) 超好用的开发工具-VScode插件EIDE_vscode eide_桃成蹊2.0的博客-CSDN博客 Setup | Embedded IDE For VSCode (em-ide.com)

2023年华数杯数学建模C题思路代码分析 - 母亲身心健康对婴儿成长的影响

# 1 赛题 C 题 母亲身心健康对婴儿成长的影响 母亲是婴儿生命中最重要的人之一&#xff0c;她不仅为婴儿提供营养物质和身体保护&#xff0c; 还为婴儿提供情感支持和安全感。母亲心理健康状态的不良状况&#xff0c;如抑郁、焦虑、 压力等&#xff0c;可能会对婴儿的认知、情…

12、Citrix Xendesktop将 MCS 创建的计算机现有发布

目录 一、前言 二、XenServer解决方案 三、Vmware解决方案 一、前言 近期接到很多Case,原先MCS计算机目录损坏,里面的机器损坏,需要重新发布使用。 二、XenServer解决方案 Citrix Hypervisor (XenServer)

深入了解PostgreSQL:高级查询和性能优化技巧

在当今数据驱动的世界中&#xff0c;数据库的性能和查询优化变得尤为重要。 POSTGRESQL作为一种开源的关系型数据库管理系统&#xff0c;在处理大规模数据和复杂查询时表现出色。 但随着数据量和查询复杂性的增加&#xff0c;性能问题可能会显现出来。 本文将深入探讨POSTGR…

华为OD机试真题 Java 实现【寻找最大价值的矿堆】【2023 B卷 100分】,附详细解题思路

目录 专栏导读一、题目描述二、输入描述三、输出描述四、Java算法源码五、效果展示1、输入2、输出 华为OD机试 2023B卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷&#xff09;》。 刷的越多…

2023年华数杯初步思路!

后续会不断更新&#xff0c;目前仅供参考&#xff0c;因为可能会不太完善。 有需要的可以私聊我&#xff0c;可能不会及时回&#xff0c;请耐心等待。 A题思路 A题的难度确实是比较大的&#xff0c;这是一道复杂的问题&#xff0c;涉及到物理学、材料科学和数学建模。首先&am…

面试题:请说下什么是重绘和重排(回流)?他们的区别是什么?

答&#xff1a; ● 第一次渲染 ○ html结构 解析为 dom树 ○ css样式 解析为 样式规则 ○ dom树 和 样式规则 匹配下&#xff0c;生成渲染树&#xff01; ○ 接下来就是重排&#xff1a;根据渲染树&#xff0c;得到每个盒子的几何信息&#xff08;大小位置&#xff09; ○ 最后…

Java面向对象之面向对象三大特性

文章目录 面向对象三大特性一、封装性二、继承性三、多态性 面向对象三大特性 一、封装性 为什么要有封装&#xff1f; 我们程序设计追求“高内聚&#xff0c;低耦合”。 高内聚 &#xff1a;类的内部数据操作细节自己完成&#xff0c;不允许外部干涉&#xff1b; 低耦合 &am…