TypeScript枚举的基础知识及实例
前言
枚举是受 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 = 200
error = 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, // 1
Toyota, // 2
Subaru, // 3
Hyundai // 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 initializer
Subaru,
Hyundai = Toyota * 3,
}
你可以这样声明上述枚举：
enum CarType {
Honda,
Hyundai,
Toyota = getCarTypeCode('toyota'),
Subaru = Toyota * 3
以上就是本文的全部内容，通过讲解什么是枚举，我们在使用枚举的时候应该注意什么。到我们常用的枚举类型（数值枚举，字符串枚举），枚举反向映射，计算枚举。相信你对枚举已经有了一定的了解
总结
到此这篇关于TypeScript枚举的基础知识及实例的文章就介绍到这了,更多相关TypeScript枚举基础内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了微信头像地址失效踩坑记附带解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
求得1-1000所有出现1的数字，并计算出现1的个数，以下是采用枚举的实现方法，但是若从1-N就不管用了，因为N不一定会是多少2013-09-09
这篇文章主要为大家详细介绍了小程序实现轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
详解ES6数组方法find()、findIndex()的总结
这篇文章主要介绍了详解ES6数组方法find()、findIndex()的总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要给大家介绍了关于ECharts地图绘制和钻取简易接口的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用ECharts具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-07-07
这篇文章主要介绍了Hammer.js+轮播原理实现简洁的滑屏功能的相关资料,需要的朋友可以参考下2016-02-02
这篇文章主要介绍了Javascript如何实现扩充基本类型,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-08-08
这篇文章主要为大家详细介绍了JavaScript canvas实现带有阴影的图形和文字，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
这篇文章主要介绍了JavaScript WeakMap使用的详细介绍，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下2021-02-02
IE6已经让人恶心很久了, Google旗下Youtube决定在3月13日起停止对IE6的支持. 但愿能加速IE6更换的速度.2010-11-11
最新评论