ts 枚举类型原理及其应用详解

ts 枚举类型介绍

TypeScript的枚举类型是一种特殊的数据类型,它允许开发者为一组相关值定义一个共同的名称,使我们可以更清晰、更一致地使用这些值。

枚举类型在TypeScript中用enum关键字定义,每个枚举值默认都是数字类型,从0开始自动递增。

枚举类型在TypeScript中用 enum 关键字定义。下面是一个简单的枚举例子:

在这个例子中我定义了一个名为 Direction 的枚举类型,它有四个可能的值:Up,Down,Left 和 Right。我们可以使用这些值来表示一个角色在屏幕上的方向。

tips: 使用枚举类型的值,可以在函数、对象和方法等中限制参数的范围

enum Direction {  Up,  Down,  Left,  Right  
}function move(direction: Direction) {  //... your code here  
}
  1. 使用enum关键字定义枚举
  2. 约定枚举名称,枚举中的值,枚举中的多个值之间通过,逗号隔开
  3. 枚举名称,以及枚举中的值应该由大写字母开头
  4. 枚举可以直接用作类型注解

枚举的值

在TypeScript中,枚举(Enum)是一种特殊的数据类型,允许为一组相关的值赋予友好的名称。枚举值默认从0开始自动递增,但也可以为它们分配特定的数值。使用属性访问操作符(.)访问枚举的成员
比如上面例子中的Direction 它有四个可能的值:Up、Down、Left和Right。默认情况下,它们的值分别是0、1、2和3。

enum Direction {  Up,  Down,  Left,  Right  
}

输出如下

在这里插入图片描述
其实这个从编译器的代码提示中也能看出来,如下
在这里插入图片描述

枚举自定义赋值

我们还可以为枚举值分配特定的数值,如下示例:

enum Direction {  Up = 1,  Down,  Left,  Right  
}

当我们为为Up分配了数值1,其它枚举值将按顺序递增。因此,Down的值为2,Left的值为3,Right的值为4。
示例如下
在这里插入图片描述
注意:枚举值默认从0开始自动递增,每次加1,也就是说,默认情况下不能为枚举值赋值100,然后让后面的依次加100

字符串枚举

ts也支持字符串枚举,字符串枚举允许为相关的字符串值赋予友好的名称,使代码更加清晰和易于理解。在 TypeScript 中定义字符串枚举的语法与数字枚举类似,只是将枚举值设置为字符串类型。

示例如下

enum Direction {Up = '向上',Down = '向下',Left = '向左',Right = '向右'
}

需要注意的是,因为字符串枚举没有自增长行为,所以字符串枚举的每个成员必须要有初始值
在这里插入图片描述
需要注意的是

  1. ts枚举没有异构类型(Heterogeneous):在某些情况下,你可能希望在一个枚举中混合使用不同的类型。然而,TypeScript不允许异构类型的枚举。这意味着所有枚举值必须属于同一种类型(数字或字符串)。

  2. 在TypeScript中,枚举值的类型在声明时确定,并且不能更改。这意味着你不能在一个枚举中混合使用数字和字符串类型的值。

ts枚举原理

枚举是typescript为数不多的非JavaScript类型级扩展(不仅仅是类型)的特性之一
因为:其它类型仅仅是被当作类型,而枚举不仅用作类型,还提供值(由上面的那些例子我们可以清楚的知道枚举成员都是有值的)
也就是说,其它类型会在编译为js代码时自动移除,但是枚举类型不行,因为它有值,且可能会被使用,于是枚举类型会被编译成js代码
如下
在这里插入图片描述

我们运行tsc命令将ts代码编译成js代码,将得到如下js代码
(不要介意,这是我的锅,汉字被编译成unicode码了,不会有什么影响的,就是人不太好看懂)
在这里插入图片描述

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

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

相关文章

前端 webSocket 的使用

webSocket使用 注意要去监听websocket 对象事件,处理我们需要的数据 我是放在了最外层的index 内,监听编辑状态,去触发定义的方法。因为我这个项目是组件化开发,全部只有一个总编辑按钮,我只需监听是否触发了编辑即可…

为什么2023年是AI视频的突破年,以及对2024年的预期#a16z

2023年所暴露的AI生成视频的各种问题,大部分被OpenAI发布的Sora解决了吗?以下为a16z发布的总结,在关键之处,我做了OpenAI Sora的对照备注。 推荐阅读,了解视频生成技术进展。 Why 2023 Was AI Video’s Breakout Year,…

Qt|大小端数据转换(补充)

Qt|大小端数据转换-CSDN博客 之前这篇文章大小端数据转换如果是小数就会有问题。 第一个方法&#xff1a; template <typename T> static QByteArray toData(const T &value, bool isLittle) {QByteArray data;for (int i 0; i < sizeof(T); i) {int bitOffset…

vue3 用xlsx 解决 excel 低版本office无法打开问题

需求背景解决思路解决效果将json导出为excel将table导为excel导出样式 需求背景 原使用 vue3-json-excel &#xff0c;导致在笔记本office环境下&#xff0c;出现兼容性问题 <vue3-json-excel class"export-btn" :fetch"excelGetList" :fields"js…

【Python程序开发系列】利用git实现协同开发做开源贡献(完整过程)

一、问题 假如我在gitee或者github上看到了一个优质的项目&#xff0c;我想对这个项目做一些深入的研究&#xff0c;并对其进行优化&#xff0c;并最终提交PR做出贡献。但是这个项目需要或者最好在虚拟机上或服务器上运行&#xff0c;虚拟机或服务器没有IDE这种代码编辑器&…

2024-02-20(DataX,Spark)

1.Oracle利用DataX工具导出数据到Mysql。Oracle利用DataX工具导出数据到HDFS。 只是根据导入导出的目的地不同&#xff0c;DataX的Json文件书写内容有所不同。万变不离其宗。 书写的Json格式的导入导出规则文件存放再Job目录下的。 2.Spark概念 Apache Spark是用于大规模数…

【docker错误解决系列】 ‘buildx‘ is not a docker command.

文章目录 问题环境解决办法尝试1&#xff1a;修改~/.docker /config.json尝试2&#xff1a;exporter DOCKER_CLI_EXPERIMENTALenabled尝试3&#xff1a;修改/etc/docker/daemon.json --> Experimental成功开启尝试4&#xff1a;开启binfmt尝试5&#xff1a;安装docker-build…

智能风控体系之逻辑回归

逻辑回归就是这样的一个过程&#xff1a;面对一个回归或者分类问题&#xff0c;建立代价函数&#xff0c;然后通过优化方法迭代求解出最优的模型参数&#xff0c;然后测试验证我们这个求解的模型的好坏。在信贷风控领域最常用的广义线性模型就是逻辑回归。其实逻辑回归线性可分…

Jetpack Compose 与 Kotlin 的兼容性对应关系

点击查看&#xff1a;Jetpack Compose Kotlin 的兼容性 官网 声明依赖项 如需添加 Compose Compiler 的依赖项&#xff0c;您必须将 Google Maven 代码库添加到项目中。如需了解详情&#xff0c;请参阅 Google 的 Maven 代码库。 在应用或模块的 build.gradle或者build.grad…

【报错】npm ERR! ERESOLVE could not resolve、certificate has expired

前情提要 使用npm淘宝镜像 https://registry.npm.taobao.org 年前创建的vue3项目npm install 完后没有使用ui写了点杂七杂八的东西&#xff0c;年后看到一篇文章有点兴趣&#xff0c;掏出来准备试一下&#xff0c;本打算安装element-plus 写起来方便点npm install element-plu…

说一下JVM类加载机制?

Java中的所有类&#xff0c;都需要由类加载器装载到JVM中才能运行。类加载器本身也是一个类&#xff0c;而它的工作就是把class文件从硬盘读取到内存中。 在写程序的时候&#xff0c;我们几乎不需要关心类的加载&#xff0c;因为这些都是隐式装载的&#xff0c;除非我们有特殊…

pc微信逆向最新3.9.8.25版本

朋友让我开发一个关于微信的计数、统计、自动回复功能的机器人&#xff0c;主要是用在win10上面。 先看看结果&#xff01; 之前写过手机端的逆向&#xff0c;PC端逆向很长时间没写了&#xff0c;所以就在网上找了找。基本都是基于3.6&#xff0c;3.7&#xff0c;3.8版本的&a…

虹科方案 | 释放总线潜力:汽车总线离线模拟解决方案

来源&#xff1a;虹科汽车智能互联 虹科方案 | 释放总线潜力&#xff1a;汽车总线离线模拟解决方案 原文链接&#xff1a;https://mp.weixin.qq.com/s/KGv2ZOuQMLIXlOiivvY6aQ 欢迎关注虹科&#xff0c;为您提供最新资讯&#xff01; #汽车总线 #ECU #汽车网关 导读 传统的…

长短期记忆神经网络

目录 LSTM 神经网络架构 分类 LSTM 网络 回归 LSTM 网络 视频分类网络 更深的 LSTM 网络 网络层 分类、预测和预报 序列填充、截断和拆分 按长度对序列排序 填充序列 截断序列 拆分序列 指定填充方向 归一化序列数据 无法放入内存的数据 可视化 LSTM 层架构 …

Find My资讯|苹果Vision Pro无法通过Find My进行远程定位和发声

苹果 Vision Pro 头显现在已经正式开售&#xff0c;不过根据该公司日前发布的支持文件&#xff0c;这款头显目前缺乏一系列关键查找功能&#xff0c;用户无法在 iCloud 网站或Find My应用中获悉头显的位置&#xff0c;也无法让这款头显远程播放声音。 不过支持文件同时提到 V…

DAY57:动态规划(子序列2)1143、1035、53

Leetcode: 1143 最长公共子序列 1、dp数组定义和下标 dp[i][j]&#xff1a;长度为[0, i - 1]的字符串text1与长度为[0, j - 1]的字符串text2的最长公共子序列。 2、确认递推公式 如果text1[i - 1] 与 text2[j - 1]相同&#xff0c;那么找到了一个公共元素&#xff0c;所以d…

Android 开机启动

一、添加权限 <uses-permission android:name"android.permission.RECEIVE_BOOT_COMPLETED"/> 二、写一个广播接收器 public class BootReceiver extends BroadcastReceiver {Overridepublic void onReceive(Context context, Intent intent) {if(Intent.ACT…

数学物理方法笔记——Γ函数

Γ \Gamma Γ函数 0.前言 本文是吴崇试的《数学物理方法》第七章学习笔记。今天是数学物理方法Ⅱ上课的第一天&#xff0c;老师在课上简单复习了一下上个学期数学物理方法I的内容&#xff0c;笔者闲着没事&#xff0c;总觉得梁昆淼先生的书不太够味儿&#xff0c;便开始翻弄起…

【机器学习】数据清洗之处理重复点

&#x1f388;个人主页&#xff1a;豌豆射手^ &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;机器学习 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共同学习、交流进…

【栈】150. 逆波兰表达式求值

150. 逆波兰表达式求值 解题思路 初始化栈&#xff1a; 创建一个整数栈用于存储操作数。 遍历表达式数组&#xff1a; 对于数组中的每个元素&#xff1a; 如果是运算符&#xff0c;从栈中弹出两个操作数&#xff0c;并根据运算符进行相应的运算&#xff0c;然后将结果压入栈…