乐趣区

关于typescript:TypeScript中的枚举

jiezi

引文

枚举是 TypeScript 引入的新类型，在 JavaScript 中是没有枚举的。TypeScript 官网对枚举是这么定义的

Enums allow a developer to define a set of named constants. Using enums can make it easier to document intent, or create a set of distinct cases. TypeScript provides both numeric and string-based enums.

翻译过去的大略意思就是：开发人员能够利用枚举来定义具名常量汇合，应用枚举可能让人更快地记录代码用意或者是创立清晰的案例汇合。TypeScript 反对数字和字符串的枚举类型。

数字类型枚举

如果枚举变量的所有成员没有进行初始化，那么第一位成员的值为 0，其它成员顺次递减。

enum E {
  X, // 0
  Y, // 1
  Z, // 2
}

如果枚举变量中有成员进行了初始化，那么在它后面的成员的值依照从 0 开始的形式顺次递减，在它之后的成员的值是在以后成员的数值根底上递减。

enum E {
  X, // 0
  Y = 3, // 3
  Z, // 4
}

这里有个须要留神的中央：没有初始化的成员须要放在首位或者是搁置在应用常量或常量表达式前面，例如上面应用函数来初始化的形式就会引发谬误。

const getValue = () => 3;

enum E {
  X, // 0
  Y = getValue(), // 3
  Z, // 4
}

报错信息如下：

如果肯定须要通过函数来进行初始化，那么应用函数初始化后的第一位成员须要应用常量或常量表达式来进行初始化，且在此之后的成员无需再进行初始化。

const getValue = () => 3;

enum E {
  X, // 0
  Y = getValue(), // 3
  Z = 4, // 4
  Q, // 5
}

字符串类型枚举

相比数字类型的枚举变量，字符串类型的枚举变量中每个成员必须应用常量进行初始化 

enum RequestType {
  Get = "GET",
  Post = "POST",
  Head = "HEAD",
  Delete = "DELETE",
}

混合类型枚举 

enum Test {
  X = 1,
  Y = "1",
}

这样的申明在语法层面没有什么问题，然而不倡议这么做，想不到要这么做的场景。

常量枚举

在 enum 关键字后面加上 const，就是常量枚举了。

const enum RequestType {
  Get = "GET",
  Post = "POST",
  Head = "HEAD",
  Delete = "DELETE",
}

一般枚举和常量枚举的区别

它们两之间的区别次要体现在编译后果上，常量枚举在编译之后，对于常量枚举的定义会被抹除掉，不会产生任何代码；而一般枚举变量在被编译过后产生会产生一段 JavaScript 代码来模仿实现枚举。

一般枚举 (enum)

enum RequestType {
  Get = "GET",
  Post = "POST",
  Head = "HEAD",
  Delete = "DELETE",
}

编译后果：

"use strict";
var RequestType;
(function (RequestType) {RequestType["Get"] = "GET";
  RequestType["Post"] = "POST";
  RequestType["Head"] = "HEAD";
  RequestType["Delete"] = "DELETE";
})(RequestType || (RequestType = {}));

常量枚举 (const enum)

const enum RequestType {
  Get = "GET",
  Post = "POST",
  Head = "HEAD",
  Delete = "DELETE",
}

const requestType = RequestType.Get;

编译后果：

const requestType = "GET";

陷阱

在咱们应用 TypeScript 来进行编译的时候，可能依据整个类型零碎来进行代码的转译，然而像 Babel 这样的工具每次只能解决一个文件的转译，假如有这么一种状况，你在一个文件中定义了常量枚举，在其它文件中援用了这个常量枚举中的成员，因为 Babel 无奈了解整个我的项目的类型零碎，它是无奈对常量枚举中的这个成员进行值的替换的，那么在编译过程中就会产生谬误。

所以 TypeScript 官网举荐咱们尽量避免应用常量枚举，能够通过在 tsconfig 中设置 isolatedModules 配合 linter 来查看。

文章援用

  1. https://stackoverflow.com/questions/56854964/why-is-const-enum-allowed-with-isolatedmodules
  2. https://www.typescriptlang.org/tsconfig#isolatedModules
  3. https://www.typescriptlang.org/docs/handbook/enums.html
退出移动版