枚举是受 TypeScript 支持的数据类型。枚举允许您定义一组命名常量。使用它们可以更轻松地记录意图或创建一组不同的案例。枚举大多数用于面向对象的编程语言(如 Java 和 C#)中,现在也可以 TypeScript 中使用。它们是 TypeScript 的少数功能之一,它不是 JavaScript 的类型级扩展。接下来我将要演示 TypeScript 枚举的基础知识以及用例,各种枚举类型和学习的后续步骤。

TypeScript 中的枚举是什么

许多编程语言(例如 C,C# 和 Java)都具有 enum 数据类型,而 JavaScript 没有。但是 TypeScript 可以,TypeScript 具有基于数字和基于字符串的枚举。TypeScript 枚举允许开发人员定义一组命名常量。使用它们可以更轻松地记录意图或创建一组不同的案例。

枚举的语法如下:

enum States {Apple,Orange,Banana,Watermelon
}
// 使用
var fruit = States.Watermelon;

在 TypeScript 中使用枚举需要注意什么

首先枚举中的值是常量,即枚举是类型安全的,在重新分配值时会返回编译错误。其次枚举应该是有限的,有助于用户创建一个自定义的常量系统。枚举在被编译后是一个对象:在 JavaScript 中创建内存有效的自定义常量,使用灵活易于表达记录意图方便作为判断用例。

enum requestStatus {success = 200error = 400
}

let requestStatus;
(function (requestStatus) {requestStatus[requestStatus["success"] = 200] = "success"requestStatus[requestStatus["error"] = 400] = "error"
})(requestStatus || (requestStatus = {}));// requestStatus:
// { '200': 'success', '400': 'error', error: 400, success: 200 }

常见枚举的类型

数值枚举字符串枚举 是我们在 TypeScript 中最常用的枚举类型,下面我将用例子向你们介绍它们的特点以及如何使用它们。

** 数字枚举

数字枚举以字符串存储数字值 。让我们使用 enum 关键字定义它们。下面我将用存储一组不同类型汽车的示例展示 TypeScript 中的数字枚举:

enum CarType {Honda,Toyota,Subaru,Hyundai
}

枚举值 CarType 有四个值:本田,丰田,斯巴鲁和现代。枚举值从 0 开始,并且每个成员的值递增 1 ,如下所示:

Honda = 0

Toyota = 1

Subaru = 2

Hyundai = 3

如果需要你可以自己初始化第一个数值,如下所示:


enum CarType {Honda = 1,Toyota,Subaru,Hyundai
}

在上面的示例中,Honda 使用数值 1 初始化了第一个成员。剩余的数字将加一。

你可能会想,如果我更改最后一个值,之前的值会根据最后定义的数值递减吗?让我们来试试:


enum CarType {Honda,Toyota,Subaru,Hyundai = 100
}

遗憾的是这是行不通的,当前例子的数值是:

enum CarType {Honda,  // 1Toyota, // 2Subaru, // 3Hyundai // 100
}

注意:不必为枚举成员分配顺序值。你可以为其分配任何所需的值

字符串枚举

字符串枚举类似于数字枚举,但是它们的枚举值是使用字符串值而不是数字值初始化的。 字符串枚举比数字枚举具有更好的可读性 ,从而更容易调试程序。

以下示例使用与数值枚举示例相同的信息,但以字符串枚举表示:

enum CarType {Honda = "HONDA",Toyota = "TOYOTA",Subaru = "SUBARU",Hyundai = "HYUNDAI"
}// 访问字符串枚举
CarType.Toyota; //return TOYOTA

注意:字符串枚举值需要单独初始化。

枚举反向映射

枚举可以使用其相对应的枚举成员值检索 num 值。使用反向映射,可以访问成员值和成员值的名称,请看下面的例子:

enum CarType {Honda = 1,Toyota,Subaru,Hyundai
}
CarType.Subaru; //return 3
CarType.["Subaru"]; //return 3
CarType[3]; //return Subaru

CarType[3] 由于反向映射,返回其成员名称“ Subaru”。让我们看另一个例子:

enum CarType {Honda = 1,Toyota,Subaru,Hyundai
}
console.log(CarType)

在浏览器的控制台中将看到以下输出:

{ '1':'Honda','2':'Toyota','3':'Subaru','4':'Hyundai',Honda:1,Toyota:2,Subaru:3,Hyundai:4
}

枚举的每个值在内部存储的枚举对象中出现两次。

计算枚举

枚举成员的值可以是常量值或计算值。请看下面的示例:


enum CarType {Honda = 1,Toyota = getCarTypeCode('toyota'),Subaru = Toyota * 3,Hyundai = 10
}function getCarTypeCode(carName: string): number {if (carName === 'toyota') {return 5;}
}CarType.Toyota; // returns 5
CarType.Subaru; // returns 15

如果枚举既包含计算成员又包含常量成员,则未初始化的枚举成员将首先出现,也可能在其他带有数字常量的初始化成员之后。下一个示例将显示错误:

enum CarType {Toyota = getCarTypeCode('toyota'),Honda, // Error: Enum member must have initializerSubaru,Hyundai = Toyota * 3,
}

你可以这样声明上述枚举:


enum CarType {Honda,Hyundai,Toyota = getCarTypeCode('toyota'),Subaru = Toyota * 3

以上就是本文的全部内容,通过讲解什么是枚举,我们在使用枚举的时候应该注意什么。到我们常用的枚举类型(数值枚举,字符串枚举),枚举反向映射,计算枚举。相信你对枚举已经有了一定的了解,如果文章有什么没有讲明白的或是有什么错误的地方欢迎指正,感激不尽。

TypeScript 枚举指南相关推荐

  1. 最全的TypeScript学习指南

    大家好,今天给大家带来 某机构教研总监陆神的开年之作<最全TypeScript学习指南>可以说是非常的细致.全面 TypeScript 是由微软2012年推出的,自由和开源的编程语言.这门 ...

  2. 简单探讨TypeScript 枚举类型

    这篇文章主要介绍了TypeScript 枚举类型,TypeScript 在 ES 原有类型基础上加入枚举类型,使得在 TypeScript 中也可以给一组数值赋予名字,这样对开发者比较友好,可以理解枚 ...

  3. TypeScript 枚举(Enum)

    TypeScript 枚举(Enum) 本节介绍枚举类型的定义及其使用,需要定义一组相同主题的常量数据时,应该立即想到枚举类型.在学习过程中,需要注意枚举类型的正向映射和反向映射,可以通过编译后的 J ...

  4. TypeScript安利指南

    TypeScript安利指南 1.前言 2.安利 3.应用场景 3-1.用我的代码就要听我的 3-2.找文档 3-3.粗心大意 3-4.隐藏的问题 3-5.接口数据不知道 3-6.增强后的class和 ...

  5. TypeScript入门指南:从JS到TS的转变

    文章目录 引言 为什么需要使用 TypeScript? 简单认识一下 TypeScript 的基础语法 1. 类型注解 2. 接口 3. 类 4. 泛型 5. 枚举 从JS到TS的转变策略 总结 引言 ...

  6. TypeScript入门指南(译文)

    前言 原文地址:https://flaviocopes.com/typescript/ 原文作者:Flavio 译者:Timbok 翻译工具:Google Translate 本文首发于我的个人网站: ...

  7. typeScript学习指南

    1. TS 的编译与安装 TS 安装 npm i typescript -g 编译 TS 使用 tsc 命令编译 ts 文件生成 js 文件,再通过 node 运行 js 文件 tsc filenam ...

  8. TypeScript入门指南(基础篇)

    写在前面 ts是拥有类型系统的js的超集,近年来非常火热.可以这么说,ts才是真正意义上的js.虽然ts的官方文档非常全面,但是对于原来没有接触过ts的同学来说,全篇通读下来需要耗掉不少时间,这篇文章 ...

  9. SolidJS Typescript 开发指南(4) 组件应用

    事件绑定 事件绑定在SolidJS里分为两种,一种是在原生dom上绑定的事件,另一种是自定义事件,原生dom的事件绑定很简单 const handleClick = (e: MouseEvent) = ...

最新文章

  1. 办公室28个经典赞美句子【转】
  2. 机器学习第一篇:开篇
  3. nio 读取目录所有文件_在NIO.2中使用文件和目录
  4. VS高版本编写C程序的C4996错误
  5. 一个人如果没有计划,那和咸鱼有什么区别!
  6. [设计模式-行为型]中介者模式(Mediator)
  7. 开课吧python小课学了有用吗-考研人注意了,停下手头的活,再忙也要看一下这个!...
  8. 前端面试有这几篇就够了--HTML篇
  9. windows系统安装下GCC编译器
  10. java代码是干嘛的_程序员究竟是干嘛的呢?
  11. 相似剩余金额宝数值添加的动画
  12. flex布局 gird布局
  13. 计算机导论 宋斌,宋斌(计算机科学与技术学院)老师 - 南京理工大学 - 院校大全...
  14. BCIduino整理|solidworks从“小白”到“比较精通”教程
  15. 看了这个逻辑关系图,才更清晰为何不让你随便外出了
  16. [渝粤教育] 南通大学 模拟电子技术 参考 资料
  17. 电子邮件注册网站是什么,163电子邮件注册流程详解
  18. 统计学习导论(1)------------一般线性模型介绍
  19. Linux 服务器用上 SS Client
  20. Studio One6完整兼容版音频数字音乐工作站DAW

热门文章

  1. finally代码块
  2. mysql 字符大对象_第02期:MySQL 数据类型的艺术 - 大对象字段
  3. linux一键启动脚本,Linux一键启动、停止、重启Tomcat sh脚本
  4. 电路上的ESR是什么意思?
  5. 揭秘:蚂蚁金服bPaaS究竟是什么?
  6. 阿里:马云从未转让和退出淘宝股份 也没有这个打算
  7. Logtail 文件日志采集之完整正则模式
  8. CSS魔法堂:那个被我们忽略的outline
  9. 如何基于Spark进行用户画像?
  10. Android 组件系列-----Activity的传值和回传值