【第2680期】使用“const”优化 TypeScript 中的枚举

前言

小知识？今日前端早读课文章由 @顾静翻译分享。

正文从这开始～～

在 TypeScript 中使用枚举是访问旨在跨多个文件共享的特定参数的好方法，例如特定用户的访问级别或特定常量。

但是 Enums 会生成大量代码，通过 const 在 TypeScript 中与我们的 Enums 一起引入关键字，我们可以减轻大量生成的代码。然而，这并非没有一些关键考虑因素，因此请继续阅读以了解更多信息。

通常，我们会如下声明一个 Enum：

 enum Sizes {
   Small,
   Medium,
   Large,
 }

然后可以像这样访问枚举：

 const coffee = {
   name: 'Espresso',
   size: Sizes.Small, // 0
 };

看起来无害，对吧？但是当我们的 TypeScript 代码被编译时呢？这是生成的代码：

 var Sizes;

 (function (Sizes) {
   Sizes[(Sizes['Small'] = 0)] = 'Small';
   Sizes[(Sizes['Medium'] = 1)] = 'Medium';
   Sizes[(Sizes['Large'] = 2)] = 'Large';
 })(Sizes || (Sizes = {}));

 const coffee = {
   name: 'Espresso',
   size: Sizes.Small,
 };

这是相当多的代码来简单地共享一个字符串变量（跨多个文件）。

默认情况下，枚举还创建所谓的反向映射。这意味着我们可以获取 Enum 属性值并将其传递给 Enum 本身以获得更文字的值：

 const coffee = {
   name: 'Espresso',
   size: Sizes[Sizes.Small], // 'Small'
 };

很酷吧？但是，大多数时候您可能不需要这种反向映射功能，如果是这种情况，那么您当然可以从 const 立即引入您的代码库中受益。

以下是我们可以更改 Enum 的内容，在声明 const 之前引入修饰符：enum

 const enum Sizes {
   Small,
   Medium,
   Large,
 }

📣警告！这消除了具有反向映射行为的能力，因此如果您依赖它，请不要使用这种方法。

编译输出？来自 TypeScript 的代码要少得多：

 const coffee = {
   name: 'Espresso',
   size: 0 /* Small */,
 };

使用 const enum 意味着代码是完全虚拟的，并且永远不会编译为实际代码。更小的包，更少的代码，简单的改变。这是对 TypeScript 语言的一个很好的补充和考虑，我强烈建议您开始使用它！

关于本文
译者：@顾 静
译文：https://morioh.com/p/064975d8b469
作者：@Todd Motto
原文：https://ultimatecourses.com/blog/const-enums-typescript

关于【优化】相关推荐。欢迎读者自荐投稿，前端早读课等你