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

news2024/11/16 4:46:06

一、元组(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/547246.html

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

相关文章

QT客户端外包开发的特点

QT是一种跨平台的C应用程序开发框架&#xff0c;主要用于开发图形用户界面(GUI)应用程序。它提供了一套丰富的类库和工具&#xff0c;可以帮助开发者快速构建高质量、可扩展、易于维护的应用程序。今天和大家分享一下QT的主要特点和注意的问题&#xff0c;希望对大家有所帮助。…

探索LeetCode【0011】盛最多水的容器(已懂)

目录 0. 题目1. 官方解答一&#xff08;已懂&#xff09;2. 精简解答二&#xff08;已懂&#xff09;3. 正确性解释 0. 题目 题目链接&#xff1a;【0011】盛最多水的容器 给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i,…

From Java To Kotlin:空安全、扩展、函数、Lambda很详细,这次终于懂了

From Java To Kotlin, 空安全、扩展、函数、Lambda 概述&#xff08;Summarize&#xff09; Kotlin 是什么&#xff1f;可以做什么&#xff1f;Android 官方开发语言从Java变为Kotlin,Java 有哪些问题&#xff1f;Kotlin的优点Kotlin 特性&#xff08;Features&#xff09; K…

有名的国外CRM系统有哪些?如何选择?

CRM系统可以帮助企业获得更多地潜在客户&#xff0c;优化销售流程&#xff0c;提高工作效率&#xff0c;增强客户服务水平&#xff0c;是如今企业不可或缺的工具。那么&#xff0c;国外CRM的知名厂商有哪些&#xff1f;下面小编来为大家进行推荐。 Zoho CRM&#xff1a; Zoho…

快手国际化 后端开发面经一面

目录 1.JMM内存模型2.堆怎么管理内存3.垃圾回收算法4.跨代引用问题怎么解决5.垃圾回收器6.CMS回收过程7.G1和CMS区别 1.JMM内存模型 计算机存储结构&#xff0c;从本地磁盘到主存到CPU缓存&#xff0c;也就是从硬盘到内存&#xff0c;到CPU。 问题&#xff1f;和推导出我们需要…

全国节能宣传周知识答题活动

全国节能宣传周知识答题活动 若想在短期内&#xff0c;进行安全生产知识的传播&#xff0c;那么答题无疑是有效方式之一。 答题活动小程序v3.0&#xff0c;基于微信原生小程序云开发实现。主要包含六大功能模块页面&#xff0c;首页、活动规则页、排行榜页、答题页、结果页、…

每日一个MySQL问题: MTS 高并发下主从表空间不一致的问题

简单记录原因&#xff0c;最近我也遇到这样的问题&#xff0c;涉及的知识点其实很多&#xff0c;我也仅仅是简单分析了一下&#xff0c;供参考。模拟版本8.0.28。 一、问题说明和模拟方式 就是主从一个表&#xff0c;主库大约600M&#xff0c;从库大约900M&#xff0c;当然主从…

推荐一个网络安全网站(HTML)

废话不多&#xff0c;直接上链接https://www.hackthissite.org/ 这不是一个新手向的网站&#xff0c;建议有一定基础的同学访问&#xff0c;里面大部分都是黑客实操&#xff0c;对大部分希望学习网络安全并有一定基础的人都可以有较大提升 全区英文&#xff0c;这对各位应该不…

Java面试题汇总(包含算法题及底层知识)

花了很久时间整理了Java领域互联网公司常考的面试题&#xff0c;主要包含六大类: 第一类:Java及Javaweb常考基础题及高级题&#xff0c;包含了很多公司爱问的非常冷门的知识点&#xff0c;很多面试官喜欢通过问非常冷门的知识来判断面试者的基础掌握程度。 第二类:Java虚拟机以…

EasyRecovery16电脑硬盘数据恢复软件功能讲解

硬盘是很常见的存储数据的设备&#xff0c;硬盘中很多重要的数据一旦丢失会很麻烦&#xff0c;不过现在有硬盘数据恢复软件可以自行在家恢复数据。今天的文章就带大家来看看硬盘恢复数据的软件EasyRecovery。 EasyRecovery 是一款专业的数据恢复软件&#xff0c;支持恢复不同存…

【Proteus仿真】51单片机Blink点灯实验

【Proteus仿真】51单片机Blink点灯实验 &#x1f516;Proteus仿真基础实验-点亮第一个LED灯。&#x1f33f;Proteus8.12平台&#x1f33f;本实验代码基于VSM Studio&#xff0c;采用SDCC编译器。&#x1f3ac;仿真演示&#xff1a; ⛳头文件使用说明 ⚡第一次调用STC89.h头文…

MySQL is null 走不走索引?

网上很多的说法&#xff0c;都是说不能走索引。但其实是错误的。 其实也是又可能走索引的。 比如&#xff0c;select * from table where a xxx or a is null; 通过explain 看这条sql的执行计划&#xff0c;type ref_or_null&#xff0c;这条sql语句会查询两次&#xff0c;第…

带拉绳的按钮

看看效果&#xff1a; 再上代吗&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><script src"https://unpkg.co/gsap3/dist/gsap.min.js"></scr…

可视区域兼容性问题的思考及方法封装

今日在复习可视化尺寸获取时突发奇想&#xff0c;为什么要在怪异模式下使用document.body.clientWidth&#xff0c;在标准模式下使用document.documentElement.clientWidth&#xff1f;以及是否在IE8及以下的版本中其中一个获取方式将返回undefined或0。  出于该问题的思考&am…

C++的cin详解

2023年5月20日&#xff0c;周六早上&#xff1a; 我发现我找不到非常详细的cin类的成员函数&#xff0c;只好自己写了。 不定期更新。 cin的继承关系 cin类继承自istream类&#xff0c;ostream类继承自ios类&#xff0c;ios类继承自ios_base类 cin类拥有的所有成员函数 1. …

【算法题】2352. 相等行列对

插&#xff1a; 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 坚持不懈&#xff0c;越努力越幸运&#xff0c;大家一起学习鸭~~~ 题目&#xff1a; 给你一个下标从 0 开始、大小为 n …

ChatGPT 推出 iOS 应用,支持语音输入,使用体验如何?

最近&#xff0c;OpenAI 宣布推出官方 iOS 应用&#xff0c;允许用户随时随地访问其高人气 AI 聊天机器人&#xff0c;此举也打破了近几个月内苹果 App Store 上充斥似是而非的山寨服务的窘境。 该应用程序是 ChatGPT 的首个官方移动应用程序。ChatGPT 软件程序在去年推出后迅速…

Inertial Explorer处理pospac数据总结

Inertial Explorer处理pospac数据的过程包括&#xff1a;1&#xff09;从pospac提取出gps数据和imu数据&#xff1b;2&#xff09;gps数据转成rinex格式&#xff1b;3)imu数据转成imr格式&#xff1b;4&#xff09;IE对gps数据进行PPP解算&#xff1b;5&#xff09;紧耦合融合解…

帆软FineReport之版本升级

最近有个需求是将帆软报表版本从9升级到10&#xff0c;记录升级过程&#xff0c;方便备查。 前置条件&#xff1a;服务器上帆软10部署成功 版本区别 fineReport 9.0 http://IP:Port/WebReport/ReportServer?reportletabc.cpt fineReport 10.0 http://IP:Port/webroot/decision…

biopython: runningtime:generator didnot stop after throw

在运行某个蛋白【3NPS】的时候出现报错: 代码: parse=PDBParse(QUIET=True) structure=parser.get_structure(X,pdb) 报错: runningtime:generator didnot stop after throw 解决: (1)检查是否biopython版本和python 版本不一致: Biopython 支持多个 Python 版本…