您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

TypeScript 枚举如何工作

时间:2022-07-06 09:01:42  来源:  作者:庄志炎

Enums 是 Enumerations 的缩写,是预设的常量,可以由开发人员定义以在代码的其他地方使用。

七爪源码:TypeScript 枚举如何工作

 

对于 JAVAScript 开发人员来说,枚举的概念通常是新的,但它们相对容易理解。 Enums 为我们正在编写的内容添加上下文。

 

如何定义 Enums

Enums 可以在 TypeScript 中使用 enum 关键字定义。 这是一个例子:

enum Pet {
    Dog,
    Cat,
    Goldfish,
    Skeleton
}

默认情况下,这些中的每一个都将被分配一个值。 所以 Dog 将为 0,Cat 为 1,依此类推。 假设我们有一个生成宠物的函数。 之前,我们可能会这样写:

// Generate a Cat
generatePet(1);

现在,我们可以为我们正在做的事情添加上下文,并使用我们的 enum 列表来做到这一点:

// Generate a Cat
generatePet(Pet.Cat);

上面的代码和我们之前做的一样,只是我们使用了我们的 Enums。

 

所以等等……为什么要使用 Enums?

你可能想知道,“有什么意义?” 这是一个有效的问题。 Enums 本质上允许我们为我们正在做的事情提供更多的上下文。 我们可以让用户使用 Enum 列表,而不是让用户记住可能的宠物编号列表。 这也让下一个阅读我们代码的人更好地了解我们正在尝试做什么。

 

数字和字符串 Enums

我们可以将 Enums 定义为数字或字符串。 让我们稍微详细地看一下这些。

enum Pet {
    Dog = 2,
    Cat,
    Goldfish,
    Skeleton
}

上面,我们给 Dog 一个数值 2。之后的每一项都会增加 1,所以 Cat 变为 3,Goldfish 变为 4,等等,但您也可以随意定义它们:

enum Pet {
    Dog = 2,
    Cat = 9,
    Goldfish = 15,
    Skeleton = 44
}

通常我们不会混合字符串和数字以避免混淆,但我们也可以将 Enums 定义为完全字符串:

enum Counting {
    One = "one",
    Two = "two",
    Three = "three"
}

 

Enum 来自函数的值

Enums 也可以是返回值的函数。 如果您只在 enum 中定义一个值,则函数必须放在最后。 如果你把函数放在开头,那么所有的 enums 都需要值。 因此,以下会引发错误:

// This will throw an error, since the function is at the start
// So typescript assumes all will be functions
enum Counting {
    One = getOne(),
    Two,
    Three,
}

但这不会:

enum Counting {
    One,
    Two,
    Three = getThree(),
}

上面 One 返回 0, Two 返回 1, Three 返回 getThree() 的值。 举个例子,我们的 getThree() 函数可能看起来像这样(返回值 3):

const getThree = function() {
    return 3;
}

 

计算的 Enums

Enums 可以被计算,(即一个计算),或者也可以引用其他 Enums。 例如:

enum FirstEnum {
    One,   // Returns "0"
    Two,   // Returns "1"
    Three  // Returns "2"
}enum AnotherEnum {
    One: FirstEnum.One, // returns FirstEnum.One, i.e. "0"
    Two: 1 + 1,         // Calculates and returns "2"
    Three: 1 * 3,       // Calculates and returns "3"
    Star: One           // Refers to AnotherEnum.One, returns "0"
}

 

结论

Enums 是 TypeScript 中为代码添加更多语义的强大方法。 它们让阅读你代码的人知道你想要完成什么,从而提高你所写内容的可维护性。 它们还允许您在代码库中引用标准常量,从而使您的生活更轻松。

关注七爪网,获取更多App/小程序/网站源码资源!



Tags:TypeScript   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
一篇文章搞懂TypeScript
TypeScript 是 JavaScript 的超集,一方面给动态类型的 js 增加了类型校验,另一方面扩展了 js 的各种功能。原始数据类型 字符串 数值 布尔 null undefined Symbol BigIntlet s...【详细内容】
2024-01-08  Search: TypeScript  点击:(96)  评论:(0)  加入收藏
TypeScript中的null和undefined的区别
在TypeScript中,null和undefined是两个特殊的值,用于表示变量的缺失或未定义。尽管它们在某些情况下可能看起来相似,并且都可以表示"没有值",但它们在语义和用法上存在一些重要...【详细内容】
2023-12-07  Search: TypeScript  点击:(139)  评论:(0)  加入收藏
为什么要在项目中使用TypeScript?
译者 | 李睿随着越来越多的开发人员采用TypeScript,人们需要了解在下一个项目中应该使用TypeScript的原因。尽管它在早期应用中遇到了一些阻力,但在过去十年,它迅速成为一种广...【详细内容】
2023-11-30  Search: TypeScript  点击:(173)  评论:(0)  加入收藏
一文读懂 TypeScript 泛型及应用
泛型是静态类型语言的基本特征,允许将类型作为参数传递给另一个类型、函数、或者其他结构。TypeScript 支持泛型作为将类型安全引入组件的一种方式。这些组件接受参数和返回...【详细内容】
2023-11-20  Search: TypeScript  点击:(196)  评论:(0)  加入收藏
TypeScript 5.3 来了,一大波新特性
根据 TypeScript 路线图,TypeScript 5.3 计划于 11 月 14 日发布。下面是该版本带来的新特性: 导入属性 导入类型中稳定支持 resolution-mode 所有模块模式均支持 resolution-...【详细内容】
2023-11-16  Search: TypeScript  点击:(164)  评论:(0)  加入收藏
万字详解 TypeScript 高级用法
TypeScript 是一种类型安全的 JavaScript 超集,除了基本类型和对象类型之外,TypeScript 还提供了一些高级类型系统,使得我们可以更好地处理复杂的数据结构和业务逻辑。本文将深...【详细内容】
2023-10-31  Search: TypeScript  点击:(342)  评论:(0)  加入收藏
不要在Typescript中使用Function类型
原文链接:https://www.totaltypescript.com/dont-use-function-keyword-in-typescript翻译:一川在Typescript中不应该使用Function作为一个类型,因为它可以表示任何函数。通常,...【详细内容】
2023-09-27  Search: TypeScript  点击:(279)  评论:(0)  加入收藏
为什么选择 TypeScript,它有什么优点吗?
在当今快速发展的软件开发领域,TypeScript技术的重要性日益凸显。TypeScript是一种由微软开发的开源编程语言,它扩展了JavaScript,并为开发者提供了强大的静态类型检查。首先,Ty...【详细内容】
2023-09-22  Search: TypeScript  点击:(192)  评论:(0)  加入收藏
掌握TypeScript,开启高质量前端之旅
相信TypeScript对于一个前端开发来讲应该是不陌生的,因为作为一个前端开发者来说,不是在学习如何使用TS就是在去学习TS如何使用的路上。为什么这么说呢?一些技术的发展离不开人...【详细内容】
2023-09-22  Search: TypeScript  点击:(284)  评论:(0)  加入收藏
反驳来了!放弃TypeScript?说明你无知!
作者 | Robert Vitonsky编译 | 云中 几天前,汉森 (David Heinemeier Hansson)宣布 Turbo8 即将放弃 TypeScript。我心想:放弃就放弃吧,反正我也不知道 Turbo 8 是什么鬼。 然而...【详细内容】
2023-09-15  Search: TypeScript  点击:(235)  评论:(0)  加入收藏
▌简易百科推荐
JavaScript的异步编程常见模式
在JavaScript中,异步编程是一种处理长时间运行操作(如网络请求或I/O操作)的常见方式。它允许程序在等待这些操作完成时继续执行其他任务,从而提高应用程序的响应性和性能。JavaS...【详细内容】
2024-04-12  靳国梁    Tags:JavaScript   点击:(11)  评论:(0)  加入收藏
17 个你需要知道的 JavaScript 优化技巧
你可能一直在使用JavaScript搞开发,但很多时候你可能对它提供的最新功能并不感冒,尽管这些功能在无需编写额外代码的情况下就可以解决你的问题。作为前端开发人员,我们必须了解...【详细内容】
2024-04-03  前端新世界  微信公众号  Tags:JavaScript   点击:(7)  评论:(0)  加入收藏
你不可不知的 15 个 JavaScript 小贴士
在掌握如何编写JavaScript代码之后,那么就进阶到实践——如何真正地解决问题。我们需要更改JS代码使其更简单、更易于阅读,因为这样的程序更易于团队成员之间紧密协...【详细内容】
2024-03-21  前端新世界  微信公众号  Tags:JavaScript   点击:(29)  评论:(0)  加入收藏
又出新JS运行时了!JS运行时大盘点
Node.js是基于Google V8引擎的JavaScript运行时,以非阻塞I/O和事件驱动架构为特色,实现全栈开发。它跨平台且拥有丰富的生态系统,但也面临安全性、TypeScript支持和性能等挑战...【详细内容】
2024-03-21  前端充电宝  微信公众号  Tags:JS   点击:(29)  评论:(0)  加入收藏
构建一个通用灵活的JavaScript插件系统?看完你也会!
在软件开发中,插件系统为应用程序提供了巨大的灵活性和可扩展性。它们允许开发者在不修改核心代码的情况下扩展和定制应用程序的功能。本文将详细介绍如何构建一个灵活的Java...【详细内容】
2024-03-20  前端历险记  微信公众号  Tags:JavaScript   点击:(23)  评论:(0)  加入收藏
对JavaScript代码压缩有什么好处?
对JavaScript代码进行压缩主要带来以下好处: 减小文件大小:通过移除代码中的空白符、换行符、注释,以及缩短变量名等方式,可以显著减小JavaScript文件的大小。这有助于减少网页...【详细内容】
2024-03-13  WangLiwen    Tags:JavaScript   点击:(13)  评论:(0)  加入收藏
跨端轻量JavaScript引擎的实现与探索
一、JavaScript 1.JavaScript语言JavaScript是ECMAScript的实现,由ECMA 39(欧洲计算机制造商协会39号技术委员会)负责制定ECMAScript标准。ECMAScript发展史: 2.JavaScript...【详细内容】
2024-03-12  京东云开发者    Tags:JavaScript   点击:(13)  评论:(0)  加入收藏
面向AI工程的五大JavaScript工具
令许多人惊讶的是,一向在Web开发领域中大放异彩的JavaScript在开发使用大语言模型(LLM)的应用程序方面同样大有价值。我们在本文中将介绍面向AI工程的五大工具,并为希望将LLM...【详细内容】
2024-02-06    51CTO  Tags:JavaScript   点击:(60)  评论:(0)  加入收藏
JS小知识,使用这6个小技巧,避免过多的使用 if 语句
最近在重构我的代码时,我注意到早期的代码使用了太多的 if 语句,达到了我以前从未见过的程度。这就是为什么我认为分享这些可以帮助我们避免使用过多 if 语句的简单技巧很重要...【详细内容】
2024-01-30  前端达人  今日头条  Tags:JS   点击:(64)  评论:(0)  加入收藏
18个JavaScript技巧:编写简洁高效的代码
本文翻译自 18 JavaScript Tips : You Should Know for Clean and Efficient Code,作者:Shefali, 略有删改。在这篇文章中,我将分享18个JavaScript技巧,以及一些你应该知道的示例...【详细内容】
2024-01-30  南城大前端  微信公众号  Tags:JavaScript   点击:(80)  评论:(0)  加入收藏
站内最新
站内热门
站内头条