TypeScript 中的 enum 枚举类型的使用解读。

news2025/1/4 19:19:50

前言

在 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"); //true

console.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.coloradmin.cn/o/736740.html

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

相关文章

Web前端工程师笔试题(合集)

Web前端开发工程师笔试题篇1 1. 在一个框架的属性面板中&#xff0c;不能设置下面哪一项。( C ) A.源文件 ; B.边框颜色 ; C.边框宽度 D.滚动条 2. CSS样式表根据所在网页的位置&#xff0c;可分为?(B ) A.行内样式表、内嵌样式表、混合样式表 B.行内样式表、内嵌样式表…

MySQL数据库——多表查询练习2

一、练习素材 创建表 --创建部门表dept create table dept ( dept1 int , dept_name varchar(11));--创建员工表emp create table emp ( sid int , name varchar(11), age int, worktime_start date, incoming int, dept2 int); 插入数据 --部门表插入数据 insert into dep…

C++ 栈和队列(stack and queue)语法使用及底层实现原理

本篇文章会对C中的容器stack和queue用法进行详解&#xff0c;也包含对优先队列&#xff08;priority_queue&#xff09;的讲解。同时会模拟实现stack、queue和priority_queue底层。希望本篇文章会对你有所帮助&#xff01; 目录 一、stack 栈 1、1 什么是适配器 1、2 stack 语法…

C++ 线程池实现

思路 创建多个工作线程同时维护一个公共的任务队列, 任务队列非空时通过信号量唤醒阻塞等待的工作线程, 工作线程通过互斥锁互斥的从任务队列中取出任务, 然后执行任务 实现 信号量类 class sem {//封装信号量类 public:sem(int num 0) {if (sem_init(&m_sem, 0, num)…

Kernel-Pwn-FGKASLR保护绕过

FGKASLR FGASLR&#xff08;Function Granular KASLR&#xff09;是KASLR的加强版&#xff0c;增加了更细粒度的地址随机化。因此在开启了FGASLR的内核中&#xff0c;即使泄露了内核的程序基地址也不能调用任意的内核函数。 layout_randomized_image 在fgkaslr.c文件中存在着…

支持中文手写和多画布的Handraw

什么是 Handraw ? Handraw 是支持中文手写和多画布的 Excalidraw 白板工具。 官网上项目名称还是 Excalidraw-CN&#xff0c;所以 Handraw 应该是基于 Excalidraw 二开的&#xff0c;特点是支持中文手写字体和多画布 官方也提供了免费使用的站点&#xff1a;https://handraw.t…

ModaHub魔搭社区:向量数据库Zilliz Cloud插入 Entity教程

目录 开始前 插入单个 Entity 批量插入 Entity 准备数据 插入数据 写入操作 本文介绍如何将 Entity 插入到 Zilliz Cloud 集群中的 Collection。 Entity 是 Collection 中的基本数据单元。同一个 Collection 中的 Entity 具有相同的属性,这些属性共同定义在 Schema 中…

低代码开发平台助力解决企业开发效率问题

编者按&#xff1a;随着企业应用需求的不断增加&#xff0c;提高企业开发效率已经成为许多企业的目标。传统的开发方法显然不适用&#xff0c;开发平台通过可视化拖拉拽搭建等易用性和高扩展性可以帮助企业解决这个问题。 关键词&#xff1a;可视化开发、私有化部署、前后端分离…

设计模式--------行为型模式

行为型模式 行为型模式用于描述程序在运行时复杂的流程控制&#xff0c;即描述多个类或对象之间怎样相互协作共同完成单个对象都无法单独完成的任务&#xff0c;它涉及算法与对象间职责的分配。 行为型模式分为类行为模式和对象行为模式&#xff0c;前者采用继承机制来在类间…

飞控学习笔记-IMU姿态算法

扩展卡尔曼滤波算法 传感器融合算法 卡尔曼滤波算法 最小二乘法 毕卡逼近法 对上式进行泰勒展开 得到四元数各阶近似算法&#xff1a; 梯度下降算法 梯度下降 互补滤波算法 chatgpt解释&#xff1a; 互补滤波&#xff08;Complementary Filter&#xff09;算法是一种常用…

zk-IMG:对抗虚假信息

1. 引言 前序博客&#xff1a; ZKP图片授权——PhotoProof&#xff1a;proofs of permissible photo edits Daniel Kang等人2022年论文《ZK-IMG: Attested Images via Zero-Knowledge Proofs to Fight Disinformation》&#xff0c;在该论文中提供了一个简单的deep fake ima…

高级编程技巧之Python装饰器详解

概要 装饰器是Python中一种强大而灵活的编程技巧&#xff0c;它可以用于修改或扩展函数的行为&#xff0c;同时又不需要修改函数的源代码。本文将介绍Python中的装饰器的基本概念、使用方法以及高级技巧&#xff0c;帮助你从入门到精通装饰器的使用。 一、基本概念 在深入学习…

【面试必考点】这一次带你彻底学会this的指向问题

文章目录 前言一、this的指向问题1.1 全局中的this1.2 普通函数中的this1.3 定时器中的this1.4 事件处理函数中的this1.5 构造函数中的this1.6 构造函数静态方法中的this1.7 箭头函数中的this 二、修改函数中的this指向2.1 call2.2 apply2.3 bind 三、 this指向练习3.1 某小游戏…

【软件分析/静态分析】chapter6 课程08 指针分析(Pointer Analysis)

&#x1f517; 课程链接&#xff1a;李樾老师和谭天老师的&#xff1a; 南京大学《软件分析》课程08&#xff08;Pointer Analysis&#xff09;_哔哩哔哩_bilibili 目录 第六章 指针分析&#xff08;Pointer Analysis&#xff09; 6.1 为什么需要指针分析 6.2 指针分析的基本…

AMAT 工业输入输出模块0100-77037

W;① ⑧ 0 ③ 0 ① 7 7 7 ⑤ 9 AMAT 工业输入输出模块0100-77037 0100-76124 0100-71313 0100-71311 0100-71309 0100-71278 0100-71267 0100-71229 0100-71224 0100-20100 IGBT 和 IGCT 是四层器件&#xff0c;乍一看并没有什么不同。但是&#xff0c;当您“ 深入了解…

Spring Boot原理分析(三):IoC容器的继承层次

文章目录 一、Spring Ioc容器的继承层次1.BeanFactory2.ListableBeanFactory3.HierarchicalBeanFactory4.ApplicationContext 二、常用的ApplicationContext的实现类1.ClassPathXmlApplicationContext&#xff08;基于XML配置&#xff09;2.AnnotationConfigApplicationContext…

[Android]使用jni实现高斯模糊

1.高斯模糊的原理&#xff1a; 根据周边的像素值来确定自己的像素值&#xff0c;平均值&#xff0c;最大值&#xff0c;最小值&#xff0c;正太分布值 2.均值模糊blur 函数声明&#xff1a; CV_EXPORTS_W void blur( InputArray src, OutputArray dst,Size ksize, Point anc…

python绘制分组条形图

文章目录 数据导入多组条形图堆叠条形图 数据导入 我们经常会遇到对比多个统计量随时间变化的图像&#xff0c;比如想知道中国、美国以及欧盟最近几年GDP变化&#xff0c;如下表所示&#xff0c;单位是万亿美元。 中国美国欧盟201813.8920.5315.98201914.2821.3815.69202014.…

转换或是克隆的虚拟机无法联网,网络服务无法启动

新转换的虚拟机&#xff0c;无法联网&#xff0c;启动网络服务&#xff0c;报错&#xff1a; systemctl start network.service job for network.service failed because the control process exited with error code. 查看网络服务状态&#xff0c;systemctl status network…

SpringMVC 中的控制器如何处理文件上传

SpringMVC 中的控制器如何处理文件上传 Spring MVC 是一个基于 Java 的 Web 框架&#xff0c;它是 Spring 框架的一部分&#xff0c;提供了一系列的组件和工具&#xff0c;帮助开发人员构建 Web 应用程序。其中&#xff0c;控制器是 Spring MVC 中的核心组件之一&#xff0c;它…