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

news2024/12/24 10:22:26

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

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

相关文章

Cannot access defaults field of Properties

今天打包maven项目时报错&#xff1a; 解决方案&#xff1a;在pom.xml中加入&#xff1a; <build><plugins><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-war-plugin</artifactId><version>3.3.1…

C#---第22:Newtonsoft中json/array的解析、创建、SelectToken(获取指定values)方法

1.解析json & array (1)json解析 using Newtonsoft.Json.Linq;string json "{CPU: Intel,Drives: [DVD read/writer,500 gigabyte hard drive]}";JObject o JObject.Parse(json);Console.WriteLine(o.GetType()); Console.WriteLine(o.ToString()); Console.…

Windows配置python(anaconda+vscode方案)的主要步骤及注意事项

Windows配置python&#xff08;anacondavscode方案&#xff09;的主要步骤及注意事项 1、准备工作 anaconda&#xff0c;官网下载&#xff08;直接下载最新版&#xff09;vscode&#xff0c;官网下载 (官网直接下载有可能太慢&#xff0c;可以考虑在国内靠谱的网站上下载&…

GIS跟踪监管系统单元信息更新

GIS跟踪监管系统单元信息更新 单元信息更新。① 新增单元。② 编辑单元。③ 删除单元。物资查询&#xff08;1&#xff09;物资查询与展示。① 几何查询。• 单击查询&#xff1a;• 拉框查询&#xff1a;• 多边形查询&#xff1a;② 物资定位。• 多个物资定位&#xff1a; 单…

Python爬虫实战案例——第五例

文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff01;严禁将文中内容用于任何商业与非法用途&#xff0c;由此产生的一切后果与作者无关。若有侵权&#xff0c;请联系删除。 目标&#xff1a;采集三国杀官网的精美壁纸 地址&#xff1a;aHR0cHM6Ly93d3…

普中51-独立按键实验

独立按键实验 通常的按键所用开关为机械弹性开关,当机械触点断开、闭合时&#xff0c;电压信号 如下图所示&#xff1a; 由于机械点的弹性作用&#xff0c;按键开关在闭合时不会马上稳定的接通&#xff0c;在断开时 也不会一下子断开&#xff0c;因而在闭合和断开的瞬间均伴…

Windows11系统C盘用户文件夹下用户文件夹为中文,解决方案

说明&#xff1a; 1. 博主电脑为Windows11操作系统&#xff0c;亲测有效&#xff0c;修改后无任何影响&#xff0c;软件都可以正常运行&#xff01; 2. Windows10系统还不知道可不可行&#xff0c;因为Windows11的计算机管理中没有本地用户和组&#xff0c;博主在csdn上看到很…

华为云云耀云服务器L实例评测|redis漏洞回顾 MySQL数据安全解决 搭建主从集群MySQL 相关设置

前言 最近华为云云耀云服务器L实例上新&#xff0c;也搞了一台来玩&#xff0c;期间遇到过MySQL数据库被攻击的情况&#xff0c;数据丢失&#xff0c;还好我有几份备份&#xff0c;没有造成太大的损失&#xff1b;后来有发现Redis数据库被攻击的情况&#xff0c;加入了redis密…

R语言绘制热图

1、初步绘图 rm(listls())#clear Global Environment setwd(D:/Desktop/0000/code-main/热图)#设置工作路径#加载R包 library (pheatmap) #读取数据 df <- read.table(file"data.txt",sep"\t",row.names 1, headerT,check.namesFALSE) #查看前3行 hea…

STM32WB55开发(5)----调整射频功率

STM32WB55开发----5.调整射频功率 概述硬件准备视频教学样品申请选择芯片型号配置时钟源配置时钟树RTC时钟配置查看开启STM32_WPAN条件配置HSEM配置IPCC配置RTC启动RF开启蓝牙开启串口调试配置蓝牙参数设置工程信息工程文件设置Keil工程配置代码配置射频功率ACI_HAL_SET_TX_POW…

【微信小程序】外卖点餐效果展示

概述 外卖点餐效果展示&#xff0c;左右布局&#xff0c;快速点餐&#xff0c;商家信息展示等...程序是模仿人家的&#xff0c;所以界面没做什么调整&#xff0c;功能是没啥问题&#xff0c;可以正常使用... 详细 直接看效果图&#xff1a; 可以把这个点餐这个功能分为5部分…

docker总结

Docker实用篇 0.学习目标 1.初识Docker 1.1.什么是Docker 微服务虽然具备各种各样的优势&#xff0c;但服务的拆分通用给部署带来了很大的麻烦。 分布式系统中&#xff0c;依赖的组件非常多&#xff0c;不同组件之间部署时往往会产生一些冲突。在数百上千台服务中重复部署…

SkyWalking9.5.0安装与SpringBoot性能链路监控

文章目录 1、下载安装1.1、安装Elasticsearch存储1.2、安装SkyWalking服务器端 2、监控微服务2.1、监控Spring Boot微服务2.1、监控Spring Cloud Gateway网关 Skywalking是分布式系统的应用程序性能监视工具&#xff0c;专为微服务&#xff0c;云原生架构和基于容器&#xff08…

Windows系统版本下载

1. msdn itellyou&#xff1a;MSDN, 我告诉你 - 做一个安静的工具站 (itellyou.cn) 2. MSDN系统库&#xff0d;致力于原版windows生态服务 (xitongku.com)

苹果电脑Mac系统运行若依框架 RuoYi前后端分离版

苹果电脑Mac系统运行若依框架 RuoYi前后端分离版 若依官网 若依官网 http://doc.ruoyi.vip/ruoyi-vue/ 若依的代码和文档都在里面 demo下载下来后还要下载安装redis,启动redis 一、下载安装redis 在终端输入&#xff1a; brew install redis安装过程将自动为我们安装最新版本…

Promise的链式调用

catch方法 .catch(onRejected) .then(null, onRejected) 链式调用 then方法必定会返回一个新的Promise 可理解为后续处理也是一个任务 新任务的状态取决于后续处理&#xff1a; 若没有相关的后续处理&#xff0c;新任务的状态和前任务一致&#xff0c;数据为前任务的数据 …

K8s的ingress-nginx配置https

文章目录 一、自签证书&&创建ingress规则test-ingress-https.yaml 二、测试https访问 一、自签证书&&创建ingress规则 ## ingress配置https访问&#xff0c;这里使用自签证书实现https访问openssl req -x509 -sha256 -nodes -days 365 -newkey rsa:2048 -keyo…

自动化测试岗位之百度测开面试题分享

1、java常用的异常处理机制&#xff1f; Java常用的异常处理机制有以下几种&#xff1a; 1&#xff09;try-catch-finally 语句&#xff1a;用于捕获和处理异常。将可能抛出异常的代码放在try块中&#xff0c;然后在catch块中处理异常。无论是否发生异常&#xff0c;finally块…

千巡翼X1 让航测无人机更小更轻更高效

利用无人机进行航空摄影测量&#xff0c;已成为测绘外业生产的主要方式&#xff0c;不仅方便快捷&#xff0c;更能全面准确获得成果。近年来&#xff0c;凭借快速高效、机动灵活、安全可靠、低成本等诸多优势&#xff0c;小型多旋翼无人机逐渐成为一些航测项目作业的新利器。 千…

SpringBoot启动方式

SpringBoot启动方式 springboot的启动经过了一些一系列的处理&#xff0c;我们先看看整体过程的流程图 SpringBoot的启动方式 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><…