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.rhkb.cn/news/76352.html

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

相关文章

MySql UNION 一行转多列

背景:DataEase饼图有特定格式&#xff0c;并且报表要求全部使用SQL语句获取数据 原先数据格式如下&#xff0c;需要行转换列 转换后结果&#xff1a; 原理 字段1&#xff0c;target作为一个不存在的字段&#xff0c;用于命名。 字段2&#xff0c;count字段是关键&#xff0c;…

基于Java的中国文化传承网站系统的设计与实现(编号S65)

基于Java的中国文化传承网站系统的设计与实现&#xff08;编号S65&#xff09; 大家好&#xff0c;小辰今天给大家介绍一个基于Spring Springboot MyBatis实现的中国文化传承网站系统&#xff0c;演示视频文章末尾公众号对号查询观看即可 文章目录 基于Java的中国文化传承网站…

Dockerfile构建Tomcat镜像(源码)

Dockerfile构建Tomcat镜像 目录 Dockerfile构建Tomcat镜像 1、建立工作目录 2、编写Dockerfile文件 3、构建镜像 4、测试容器 5、浏览器访问测试&#xff1a; 1、建立工作目录 [roothuyang1 ~]# mkdir tomcat[roothuyang1 ~]# cd tomcat/[roothuyang1 tomcat]# lsapach…

架构训练营学习笔记:5-1 计算架构模式之多级缓存架构

序 本节主要是计算架构。 多级缓存架构 缓存与缓冲&#xff1a;通常场景是读缓存&#xff0c;写缓冲。 缓存技术的本质&#xff1a;空间换时间&#xff0c;因此缓存架构属于高性能计算 架构。 缓存设计框架 主要考虑存什么&#xff1f;存多久&#xff1f;存哪里&#xff1f;如…

初识网络(JavaEE初阶系列9)

目录 前言&#xff1a; 1.网络的发展史 1.1独立模式 1.2网络互联 1.3局域网LAN 1.4广域网WAN 2.网络通信基础 2.1IP地址 2.2端口号 3.认识协议 3.1协议分层 3.2分层的作用 3.3TCP/IP五层&#xff08;或四层&#xff09;模型 3.4OSI七层模型 3.5网络设备所在分层 …

【Elasticsearch】Elasticsearch快速入门,掌握这些刚刚好!(官网入门案例)

文章目录 1. 简介2. 相关概念3. 安装4. 集群状态查看5. 索引操作6. 文档操作7. 数据搜索数据准备搜索入门(match_all)条件搜索(match)组合搜索(bool)过滤搜索(filter)搜索聚合(aggs) 8. 参考资料 本文的主要功能是带领从0到1入门Elasticsearch的基础使用&#xff0c;重点是Elas…

springboot+vue农产品特产商城销售平台_50kf2 多商家

随着我国经济的高速发展与人们生活水平的日益提高&#xff0c;人们对生活质量的追求也多种多样。尤其在人们生活节奏不断加快的当下&#xff0c;人们更趋向于足不出户解决生活上的问题&#xff0c;南阳特产销售平台展现了其蓬勃生命力和广阔的前景。与此同时&#xff0c;为解决…

Meta开源AI音频和音乐生成模型

在过去的几年里&#xff0c;我们看到了AI在图像、视频和文本生成方面的巨大进步。然而&#xff0c;音频生成领域的进展却相对滞后。MetaAI这次再为开源贡献重磅产品&#xff1a;AudioCraft&#xff0c;一个支持多个音频生成模型的音频生成开发框架。 AudioCraft开源地址 开源地…

【JavaEE】简单了解JVM

目录 一、JVM中的内存区域划分 二、JVM的类加载机制 1、类加载的触发时机 2、双亲委派模型 1.1、向上委派 1.2、向下委派 三、JVM中的垃圾回收机制&#xff08;GC&#xff09; 1、确认垃圾 1.1、引用计数&#xff08;Java实际上没有使用这个方案&#xff0c;但是Pytho…

SpringBoot核心内容梳理

1.SpringBoot是什么? Spring Boot是一个基于Spring框架的快速开发应用程序的工具。它简化了Spring应用程序的创建和开发过程&#xff0c;使开发人员能够更快速地创建独立的、生产就绪的Spring应用程序。它采用了“约定优于配置”的原则&#xff0c;尽可能地减少开发人员需要进…

vue使用拖拽功能实现仓库存放货物的需求

效果&#xff1a; 代码 <template><div><div class"bigTitle">xxxxxxxxxxxxxx仓库拖拽系统</div><div class"container2 flex-j-space-between"><div class"product-list"><div class"leftTree h…

利用线程池多线程并发实现TCP两端通信交互,并将服务端设为守护进程

文章目录 实现目标实现步骤封装日志类封装线程池封装线程封装锁封装线程池 TCP通信的接口和注意事项accept TCP封装任务客户端Client.hppClient.cc 服务端Server.hpp Server.cc实现效果 守护进程服务端守护进程化 实现目标 利用线程池多线程并发实现基于TCP通信的多个客户端与…

Java Collection接口详解

Collection 接口 Collection接口是Java集合框架的根接口。 Collection 接口是 List、Set 和 Queue 接口的父接口&#xff0c;通常情况下不被直接使用。 Collection 接口定义了一些通用的方法&#xff0c;通过这些方法可以实现对集合的基本操作。定义的方法既可用于操作 Set …

docker创建镜像并上传云端服务器

docker创建镜像并上传云端服务器 docker容器与镜像的关系1.基本镜像相关文件创建1.1 创建dockerfile文件1.2.创建do.sh文件1.3 创建upload_server_api.py文件1.4 创建upload_server_webui.py文件1.5 文件保存位置 2. 创建镜像操作2.1 创建镜像2.3 创建容器2.2 进入环境容器2.3 …

【2023年电赛国一必备】A题报告模板--可直接使用

任务 图1 任务内容 要求 图2 基本要求内容 图3 发挥部分内容 说明 图4 说明内容 评分标准 图5 评分内容 正文 &#xff08;部分&#xff09; 摘要 本实验旨在设计和制作一个由两个单相逆变器组成的并联系统&#xff0c;用于为电阻负载供电或并入220V电网。采用基于STM…

【react】react生命周期钩子函数:

文章目录 一、生命周期概念:二、生命周期:三、挂载阶段&#xff08;constructor > render > componentDidMount&#xff09;&#xff1a;四、更新阶段&#xff08;render > componentDidUpdate&#xff09;&#xff1a;五、卸载阶段&#xff08;componentWillUnmount …

il汇编整数相加

在这里尝试了IL汇编字符串连接&#xff1b; IL汇编字符串连接_bcbobo21cn的博客-CSDN博客 下面来看一下IL汇编整数相加&#xff1b; 大概的看一下一些资料&#xff0c;下面语句&#xff0c; ldc.i4 20 ldc.i4 30 add 看上去像是&#xff0c;装载整数20到一个类似于…

VK1056B 液晶LCD显示驱动IC/14x4com工作电压2.4-5.2V稳定测试

LCD液晶显示驱动芯片VK1056B 14x4位的显示RAM适用于各种LED应用产品 产品型号&#xff1a;VK1056B (兼容替代TM系列驱动) 产品品牌&#xff1a;VINKA永嘉微电 封装形式&#xff1a;SOP24 SSOP24 产品年份&#xff1a;新年份 提供专业工程服务&#xff0c…

Django Rest_Framework(三)

文章目录 1. 认证Authentication2. 权限Permissions使用提供的权限举例自定义权限 3. 限流Throttling基本使用可选限流类 4. 过滤Filtering5. 排序Ordering6. 分页Pagination可选分页器 7. 异常处理 ExceptionsREST framework定义的异常 8. 自动生成接口文档coreapi安装依赖设置…

Apache Kafka Learning

目录 一、Kafka 1、Message Queue是什么&#xff1f; 2、Kafka 基础架构 3、Kafka安装 二、Maven项目测试 1、Topic API 2、生产者&消费者 一、Kafka Kafka是由Apache软件基金会开发的一个开源流处理平台&#xff0c;由Scala和Java编写。Kafka是一种高吞吐量的分布式…