有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

使用“const”优化 TypeScript 中的枚举

javascript cat 2个月前 (07-24) 119次浏览 已收录 0个评论 扫描二维码

正文从这开始~~

在 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 语言的一个很好的补充和考虑,我强烈建议您开始使用它!

喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址