一步一步学习TypeScript(09.enums_枚举)

最新推荐文章于 2025-05-16 18:40:57 发布

原创最新推荐文章于 2025-05-16 18:40:57 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#typescript

TypeScript 专栏收录该内容

21 篇文章

订阅专栏

本文深入探讨TypeScript中的枚举类型，包括基本用法、枚举与数字的关系、内部实现原理及常量枚举的应用。通过示例展示了如何正确使用枚举，并介绍了使用常量枚举来提高代码效率的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前在,一步一步学习TypeScript(02.基本类型)这篇中,初步学习了enum类型.这篇是对enum类型的一些补充.
看一些例子:

Enums

enum Color {
    Red,
    Green,
    Blue
}

var colorValue = Color.Red;
colorValue = "2"; //错误, enum 值为number类型,并且是从0开始的,所以赋值string会得到一个错误

Enums 和 Numbers

TypeScript enum类型是基于number的,所以可以使用number类型变量对其赋值

enum Color {
    Red,
    Green,
    Blue
}

var colorValue = Color.Red;
colorValue = 2; //OK, colorValue隐式转为了number类型

Enums 内部原理

我们打开之前编译好的js文件

var Color;
(function (Color) {
    Color[Color["Red"] = 0] = "Red";
    Color[Color["Green"] = 1] = "Green";
    Color[Color["Blue"] = 2] = "Blue";
})(Color || (Color = {}));

Color[Color["Red"] = 0] = "Red" 这行等价于
Color["Red"] = 0;和Color[0] = "Red";

它的意思就是我们可以在TS中这么使用enum:

enum Color {
    Red,
    Green,
    Blue
}

console.log(Color["Red"]);     // 0
console.log(Color[0]);         // "Red"
console.log(Color[Color.Red]); // "Red" 因为 `Color.Red == 0`

可以定义两个同名的enum,但是其中一个enum必需设置一个初始标识

enum Color {
    Red,
    Green,
    Blue
}

enum Color {
    DarkRed = 3,
    DarkGreen,
    DarkBlue
}

Const Enums

使用const修饰enum

const enum Color {
    Red,
    Green,
    Blue
}

var value = Color.Red;

查看其编译后的js

var value = 0 /* Red */;

使代码量减小的同时在运行速度上也会有提高.

大家同样可以看 https://basarat.gitbooks.io/typescript/content/docs/enums.html