详细版易学版TypeScript - 元组 枚举

news2024/9/21 16:03:44

一、元组(Tuple)

数组:合并了相同类型的对象

const myArr: Array<number> = [1, 2, 3];

元组(Tuple):合并了不同类型的对象

// 定义元组时就要确定好数据的类型,并一一对应
const tuple: [number, string] = [12, "hi"];
// 添加内容时,不用一一对应,只要是联合类型里的类型就可以push
tuple.push(34);
tuple.push("vite");
//tup.push(true); // 报错,因为越界了,联合类型里没有boolean类型

二、枚举

1、前端为什么要使用枚举

  • 去魔数化:一旦有个数值改动,不用再全局替换匹配

  • 语义化:可以直观通过值推导出含义,例如,通过STATUS.SUCCESS就可以大概猜出含义

  • 定义一体化:枚举值和枚举描述写在了一起,不分散

  • 使用方便:无需额外的过滤器,就可以通过枚举名称/枚举值获得枚举含义

2、关键字 enum

使用枚举可以清晰地表达意图

使用枚举可以定义一些带名字的常量

ts支持数字的和基于字符串的枚举

3、定义一个数字枚举

(1)枚举成员的值默认自增长,每个枚举成员的值都是不同的

// 如果没有初识值,那么Direction.Up的值默认是0,Down的值是1,Left的值是1,Right的值是3
enum Direction1 {
    Up,
    Down,
    Left,
    Right
}

// 如果Up的值设置为1,其余枚举成员会从1开始自动增长 
// 也就是说,Direction.Up的值为1,Down的值是2,Left的值是3,Right的值是4
enum Direction2 {
    Up = 1,
    Down,
    Left,
    Right
}

// 如果Left的值设置为6,那么Up的值为0,Down的值是1,Right的值是7(规则:根据上一个值递增)
enum Direction3 {
    Up,
    Down,
    Left = 6,
    Right
}

console.log("Direction1--->", Direction1);
console.log("Direction2--->", Direction2);
console.log("Direction3--->", Direction3);

查看打印结果:

枚举里属性值不可以相同,如果值相同,后面的属性值会干掉前面的属性值

// 假如Down和Left的值都是6,'6':'Down'被干掉了
enum Direction4 {
    Up,
    Down=6,
    Left = 6,
    Right
}
console.log("Direction4--->", Direction4);

查看打印结果:

(2)数字枚举可以被混入到计算的和常量成员

const getVal = (): number => 1;
enum Sum {
    A,
    B = getVal(),
    C // 报错,没有初始化的C不可以放在包含计算的B的后面,要么B放到最后,要么给C也赋值
}

4、定义一个字符串枚举

在一个字符串枚举里,每个成员都必须用字符串字面量,或另外一个字符串枚举成员进行初始化。

字符串枚举没有自增长的行为,字符串枚举可以很好的序列化。

enum Str {
    Up = "Up",
    Down = "Down",
    Left = "Left",
    Right = "Right"
}

5、枚举可以混合字符串和数字成员,但不建议这样做

enum StrNum {
    Up = "Up",
    Down = 3
}

6、如何使用枚举

enum TestRes {
    No = 0,
    Yes = 1
}
const myFunc6 = function (name: string, message: number): void {
    //...
}
console.log(myFunc6('hi', TestRes.No));

7、常数枚举

使用 const enum 定义

常数枚举与普通枚举的区别:它会在编译阶段被删除,并且不能包含计算成员

/*
 编译后(也就是js文件中),下面的定义会被删除
 const enum Obj {
     Test1,
     Test2,
     Test3 = "hi",
 }
*/
const enum Obj {
    Test1,
    Test2,
    Test3 = "hi", // 可以包含文字值
    Test5 = "hi".length,  // 报错,不能包含计算成员
}
console.log(Obj.Test1);
console.log(Obj.Test2);
console.log(Obj.Test3);

查看js文件:

8、外部枚举

使用 declare enum 定义

主要应用在声明文件的位置

只会用于编译时检查,编译结果中会被删除

/*
编译后(也就是js文件中),下面的定义会被删除
 declare enum OutEnum {
    Atest,
    BTest,
 }
*/ 
declare enum OutEnum {
    Atest,
    BTest,
}
console.log(OutEnum.Atest);

查看js文件:

js运行报错,因为外部枚举的定义在编译后被删除了,所以编译后的js里也找不到OutEnum的声明:

9、常数枚举和外部枚举一起定义

// 可以理解为遵循常数枚举规则
declare const enum TestEnum {
    Test11,
    Test12,
    Test13,
}
console.log(TestEnum.Test11);

查看js文件:

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

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

相关文章

SQLIST数据库编程

目录 数据库简介 1.常用数据库 2. SQLite基础 3.创建SQLite数据库 虚拟中sqlite3安装 基础SQL语句使用 sqlite3编程 数据库简介 1.常用数据库 大型数据库 &#xff1a;Oracle 中型数据库 &#xff1a;Server是微软开发的数据库产品&#xff0c;主要支持windows平台 小型数据库…

( 位运算 ) 190. 颠倒二进制位 ——【Leetcode每日一题】

❓190. 颠倒二进制位 难度&#xff1a;简单 颠倒给定的 32 位无符号整数的二进制位。 提示&#xff1a; 请注意&#xff0c;在某些语言&#xff08;如 Java&#xff09;中&#xff0c;没有无符号整数类型。在这种情况下&#xff0c;输入和输出都将被指定为有符号整数类型&a…

Vue.js自定义指令及用Vue实现简单的学生信息管理系统

目录 一、自定义指令v-mycolor 自定义指令生命周期&#xff1a; 二、使用钩子函数的自定义指令 三、Vue实现简单的学生信息管理系统 除了核心功能默认内置的指令&#xff0c;Vue.js允许注册自定义指令。添加一个自定义指令&#xff0c;有两种方式&#xff1a; &#xff08;1…

Redis 常见命令

一、redis中的常见数据结构 Redis共有5种常见数据结构&#xff0c;分别字符串&#xff08;STRING)、列表&#xff08;LIST&#xff09;、集合&#xff08;SET)、散列&#xff08;HASH&#xff09;、有序集合&#xff08;ZSET)。 二、redis中字符串(String)介绍 String 类型是…

PS网页版设计工具有哪些?

Photoshop是平面设计领域的老熟人&#xff0c;也是许多设计师的启蒙设计软件。然而&#xff0c;Photoshop的功能繁多&#xff0c;需要设计师具备较强的软件操作能力。在我们以为会和Photoshop一直相爱相杀的时候&#xff0c;一款专注于用户界面的矢量设计软件——即时设计&…

荔枝派Zero(全志V3S)驱动开发之RGB LCD屏幕显示jpg图片

文章目录 前言一、jpeglib 库移植1、jpeglib 库下载2、安装 jpeglib 库 二、jpeg 图片解压缩过程和压缩过程1、jpeg 解压缩过程2、jpeg 压缩过程 三、编译 C 源码1、源码展示2、拷贝需要用到的头文件3、编译 C 代码 四、验证测试1、拷贝相关文件到开发板2、显示图片 前言 由于…

深入了解Dubbo SPI 工作机制——@Adaptive(6)

Adaptive这个注解就是适配策略&#xff0c;我都是称呼为最佳适配子类&#xff0c;或者最佳适配类。就是找到最佳的子实现类的&#xff0c;其实就是默认的类。这个注解可以打在类上方&#xff0c;那么dubbo SPI机制通过接口获取实例类&#xff0c;就是获取到有Adaptive注解的实现…

WooCommerce商城开发:高性能订单存储数据库模式

这是一系列深入探讨的第一部分&#xff0c;专门用于解释高性能订单存储数据库模式的实施。 与1 月份提出的版本相比&#xff0c;数据库模式的变化很小。我们在不同的地方添加和删除了几列&#xff0c;但整体表结构与第一个提案中描述的相同&#xff1a; 我们在此项目中添加了4…

51单片机(九)LED点阵屏

❤️ 专栏简介&#xff1a;本专栏记录了从零学习单片机的过程&#xff0c;其中包括51单片机和STM32单片机两部分&#xff1b;建议先学习51单片机&#xff0c;其是STM32等高级单片机的基础&#xff1b;这样再学习STM32时才能融会贯通。 ☀️ 专栏适用人群 &#xff1a;适用于想要…

创维E900-S-Hi3798MV100-当贝纯净桌面-卡刷固件包

创维E900-S-Hi3798MV100-当贝纯净桌面-卡刷固件包-内有教程 特点&#xff1a; 1、适用于对应型号的电视盒子刷机&#xff1b; 2、开放原厂固件屏蔽的市场安装和u盘安装apk&#xff1b; 3、修改dns&#xff0c;三网通用&#xff1b; 4、大量精简内置的没用的软件&#xff0…

RabbitMQ消息队列实战(5)—— 发后即忘和远程RPC数据传输模型

本文我们学习下使用RabbitMQ实现的几种数据发送的模型——发后即忘模型和远程RPC调用。二者实际上是从业务的角度定义的一个RabbitMQ的使用模型。发后即忘模型&#xff0c;强调发送时不太关心消息接收者的执行结果&#xff0c;仅仅是为了发送信息。而远程RPC调用模型强调&#…

vulnhub靶场之double:1

1.信息收集 探测存活主机&#xff0c;发现192.168.239.178存活 对目标主机192.168.239.176进行端口扫描&#xff0c;发现存活22(SSH)、25(smtp)、80、8080端口。 浏览器访问http://192.168.239.178&#xff0c;发现有两个链接。查看源码发现一个是跳转到/production&#xf…

David Silver Lecture 6: Value function approximation

1 Introduction pipeline大致讲完了&#xff0c;开始到数值计算的部分。 1.1 大规模的运算 对于这种大规模运算&#xff0c;如何拓展前面两个章节的内容&#xff0c;进行实战。 1.1.1 回顾value function approximation 1.1.3 which function approximator 强化学习中的值函…

java源码----集合系列1----ArrayList,linkedList

Arraylist 基础信息 底层是一个object数组 Arraylist 是java里面Collection 标准的一个集合&#xff0c;其底层是一个object数组。当new一个空参的ArrayList的时候&#xff0c;会默认生成一个空数组。 Arraylist上限是 Integer.MAX_VALUE - 8(Integer.MAX_VALUE 2^31-1);…

一文搞定接口测试及常用接口测试工具解析

目录 首先&#xff0c;什么是接口呢&#xff1f; 一、常见接口&#xff1a; 二、前端和后端&#xff1a; 三、什么是接口测试&#xff1a; 四、接口组成 五、为什么要做接口测试&#xff1a; 六、接口测试怎么测&#xff1a; 七、用什么工具测 首先&#xff0c;什么是接…

软件工程开发文档写作教程(06)—项目建议书写作规范

本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl本文参考资料&#xff1a;电子工业出版社《软件文档写作教程》 马平&#xff0c;黄冬梅编著 项目建议书概述 项目建议书一般是由主策划或者项目经理负责编写的。进行可行性分析是一个自…

3.编写油猴脚本之-helloword

3.编写油猴脚本之-helloword Start 通过上一篇文章的学习&#xff0c;我们安装完毕了油猴插件。今天我们来编写一个helloword的脚步&#xff0c;体验一下油猴。 1. 开始 点击油猴插件>添加新脚本 默认生成的脚本 // UserScript // name New Userscript // name…

Linux介绍及环境搭建

文章目录 &#x1f3ac;1.Linux背景&#x1f4bb;1.1 计算机的发展&#x1f4bb;1.2 操作系统的故事&#x1f4bb;1.3 Linux操作系统&#x1f4bb;1.4 Linux的应用场景&#x1f4bb;1.5 Linux版本 &#x1f50c;2. Linux环境&#x1f4be;2.1 环境选择&#x1f4be;2.2 云服务器…

u1s1,查问题已经从百度到Google,再从Google到gpt了

现在查问题&#xff0c;查资料&#xff0c;基本都是问gpt。 感觉AI的回答会比较智能。 除了解释说明&#xff0c;还会附录Demo源码。 而且没有广告和其他杂七杂八的。 方便/快捷&#xff0c;提高了工作效率。 举例 上传图片后无法渲染的文章,发现数据库的图片地址前缀带blob,可…

数据结构-查找-线性结构(顺序、折半、分块)查找

目录 一、顺序查找 *查找效率分析 二、折半查找 *查找效率分析 三、分块查找 *查找效率分析 一、顺序查找 有称线性查找&#xff0c; 算法思想&#xff1a;从头到尾挨个查找(反过来也行) typedef struct{int *elem; //数据int TableLen; …