开发工具 TypeScript 枚举指南

upyun · 2021年10月12日 · 最后由 LiinNs 回复于 2021年10月12日 · 333 次阅读

枚举是受 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

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

需要 登录 后方可回复, 如果你还没有账号请 注册新账号