TypeScript【enum 枚举】

这篇具有很好参考价值的文章主要介绍了TypeScript【enum 枚举】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

导语

在 TypeScript 中,新增了很多具有特性的一些数据类型处理方法,enum 【枚举】就是其中,很具有代表性的一种,所以本章节就来聊聊 在 TypeScript 中如何去运用 enum 【枚举】


TypeScript【enum 枚举】,TypeScript,typescript,javascript,前端

枚举的概念

枚举(Enum)类型用于取值被限定在一定范围内的场景,比如一周只能有七天,颜色限定为红绿蓝等。

枚举使用 enum 关键字来定义:

enum DaysDataType {
    Sun,
    Mon,
    Tue,
    Wed,
    Thu,
    Fri,
    Sat
};
console.log(DaysDataType);

默认赋值【自动赋值】

枚举成员默认值会被赋值为从 0 开始递增的索引数字,同时也会对枚举值到枚举名进行反向映射

上面输出打印 枚举 DaysDataType:

TypeScript【enum 枚举】,TypeScript,typescript,javascript,前端

上面声明的枚举,最后被编译为 JS 后,会呈现以下的样式。

TypeScript【enum 枚举】,TypeScript,typescript,javascript,前端


手动赋值

我们也可以给枚举项手动赋值

enum DaysDataType {
    Sun = 7,
    Mon = 14,
    Tue = 21,
    Wed = 54,
    Thu,
    Fri,
    Sat
};
console.log(DaysDataType);

手动赋值后,再次注意看编译后的内容:
TypeScript【enum 枚举】,TypeScript,typescript,javascript,前端

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 枚举】,TypeScript,typescript,javascript,前端


值得注意
如果未手动赋值的枚举项与手动赋值的重复了,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

TypeScript【enum 枚举】,TypeScript,typescript,javascript,前端

所以使用的时候需要特别注意,尽量避免出现 数据覆盖的情况。

当然:手动赋值的枚举项不仅仅可以不是数字类型,此时需要使用类型断言来让 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);

TypeScript【enum 枚举】,TypeScript,typescript,javascript,前端


枚举的常数项和计算所得项

枚举项有两种类型:常数项(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 */];

常数枚举与普通枚举的区别是,它会在编译阶段被删除,并且不能包含计算所得项的枚举成员。主要作用是在编译阶段进行类型检查。
TypeScript【enum 枚举】,TypeScript,typescript,javascript,前端


外部枚举

外部枚举(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 【枚举】的使用场景,以及使用枚举的多种定义方式。提供给大家参考学习。


🚵‍♂️ 博主座右铭:向阳而生,我还在路上!
——————————————————————————————
🚴博主想说:将持续性为社区输出自己的资源,同时也见证自己的进步!
——————————————————————————————
🤼‍♂️ 如果都看到这了,博主希望留下你的足迹!【📂收藏!👍点赞!✍️评论!】
——————————————————————————————文章来源地址https://www.toymoban.com/news/detail-626779.html

到了这里,关于TypeScript【enum 枚举】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

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

    数组:合并了相同类型的对象 元组(Tuple):合并了不同类型的对象 1、前端为什么要使用枚举 去魔数化:一旦有个数值改动,不用再全局替换匹配 语义化:可以直观通过值推导出含义,例如,通过 STATUS.SUCCESS 就可以大概猜出含义 定义一体化:枚举值和枚举描述写在了一起,

    2024年02月03日
    浏览(32)
  • TypeScript枚举:方便的常量定义方式

    在 TypeScript 中,枚举是一个非常重要的特性,它提供了一种方便的常量定义方式。在本文中,我们将详细探讨 TypeScript 枚举的用法和优势。 枚举是指 一组命名的常量 ,这些常量称为 枚举成员 。枚举可以在 TypeScript 中以类似于 C# 和 Java 的方式来定义,它们在 JavaScript 中被编

    2024年02月11日
    浏览(37)
  • 4、详细版易学版TypeScript - 元组 枚举

    数组:合并了相同类型的对象 元组(Tuple):合并了不同类型的对象 1、前端为什么要使用枚举 去魔数化:一旦有个数值改动,不用再全局替换匹配 语义化:可以直观通过值推导出含义,例如,通过 STATUS.SUCCESS 就可以大概猜出含义 定义一体化:枚举值和枚举描述写在了一起,

    2024年02月06日
    浏览(36)
  • 服务端使用ASP.NET Core SignalR与Vue3(TypeScript与JavaScript)前端建立通信(以进度条为例)

    1. ASP.NET Core           ASP.NET Core 是一个跨平台、高性能及开源的框架,用于生成基于云且连接互联网的新式应用程式。 官方文档:ASP.NET documentation | Microsoft Learn  2.  ASP.NET Core SignalR         ASP.NET Core SignalR 是开源库,用于服务端与客户端建立实时通信,可以自动管理连接

    2024年02月06日
    浏览(46)
  • 前端2023最全面试题(javaScript、typeScript、vue2、vue3、html、css、uniapp、webpack、vite、react)

    答案:JavaScript中的闭包是一种函数,它有权访问其词法环境的变量和其它函数。这意味着,即使其包含它的函数已经执行完毕,其词法环境仍然存在,因此可以访问其作用域内的变量。 答案:回调函数是在某个特定事件之后执行的函数。在JavaScript中,通常使用回调函数来处

    2024年02月06日
    浏览(62)
  • TypeScript与JavaScript

    博主作品: 《Java项目案例》主要基于SpringBoot+MyBatis/MyBatis-plus+MySQL+Vue等前后端分离项目,可以在左边的分类专栏找到更多项目。《Uniapp项目案例》有几个有uniapp教程,企业实战开发。《微服务实战》专栏是本人的实战经验总结,《Spring家族及微服务系列》专注Spring、SpringMV

    2024年02月05日
    浏览(44)
  • 《前端面试题》- TypeScript - TypeScript的优/缺点

    简述TypeScript的优/缺点 优点 增强了代码的可读性和可维护性 包容性,js可以直接改成ts,ts编译报错也可以生成js文件,兼容第三方库,即使不是ts编写的 社区活跃,完全支持es6 缺点 增加学习成本 增加开发成本,因为增加了类型定义 需要编译,类型检查会增加编译时长,语

    2024年04月23日
    浏览(40)
  • 单例模式——javascript和typescript

    确保某个方法或者类只有一个是咧。而且自行实例子并向整个系统提供这个实例。 某个方法或类只能一个; 必须自行创建这个实例 必须自行向整个系统提供这个实例。

    2024年02月05日
    浏览(49)
  • 一文了解JavaScript 与 TypeScript的区别

    TypeScript 和 JavaScript 是两种互补的技术,共同推动前端和后端开发。在本文中,我们将带您快速了解JavaScript 与 TypeScript的区别。   一、TypeScript 和 JavaScript 之间的区别 JavaScript 和 TypeScript 看起来非常相似,但有一个重要的区别。 JavaScript 和 TypeScript 之间的主要区别在于 JavaS

    2024年02月14日
    浏览(51)
  • TypeScript是什么?它与JavaScript有什么区别?

    面试题-TS(1):TypeScript是什么?它与JavaScript有什么区别? TypeScript是一种编程语言,它是JavaScript的超集。它通过添加静态类型、类、接口和模块等功能来扩展JavaScript。 JavaScript是一种广泛应用于Web开发的脚本语言,它的灵活性和易用性使得它成为了开发者们的首选。然而,JavaS

    2024年02月16日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包