《二》大话 Typescript 枚举

——点击上方蓝色字体,关注我哦~——

前言: 本文章为 TypeScript 系列文章. 

旨在利用碎片时间快速入门 Typescript. 或重新温故 Typescript 查漏补缺.

在官方 api 的基础上, 加上一些日常使用的感想. 

如果感兴趣的话~ 欢迎关注, 后续持续推出文章. 

文章列表: 

• 《一》大话 TypeScript 基本类型

• 《二》大话 Typescript 枚举

• 《三》大话 Typescript 接口

• …… 
  

目录结构

• 数字枚举

• 字符串枚举

• 异构枚举

• 常量枚举

• 枚举成员

• 枚举合并

• 外部枚举

• 总结

  

数字枚举

1. 若无默认值, 默认从0开始, 依次递增

enum learn {

   math,

   language,

   sports

}

console.log(learn.math) // 0

console.log(learn.language) // 1

console.log(learn.sports) // 2

2. 指定初始值, 依次递增

enum learn {

   math = 2,

   language,

   sports

}

console.log(learn.math) // 2

console.log(learn.language) // 3

console.log(learn.sports) // 4

我们在控制台输出一下值, 发现对象如下: 

既可以用枚举的 value 来索引, 又可以用枚举的 key 值来索引.  

接下来我们看一下 typescript 枚举的实现原理

(function (learn) {

   learn[learn["math"] = 2] = "math";

   learn[learn["language"] = 3] = "language";

   learn[learn["sports"] = 4] = "sports";

})(learn || (learn = {}));

首先 learn["math"] = 2 将key值和 value 对应

learn[learn["math"] = 2] = "math";  此时将 value 作为 索引, key 作为 value .

这个实现方式有点意思. 

tip : 任何一个语法都可以在 官方下看它的实现原理.  地址: https://www.tslang.cn/play/index.html

字符串枚举

enum learn {

   Success = '成功!',

   Fail= '失败'

}

同样, 看一下实现的原理. 

var learn;

(function (learn) {

   learn["Success"] = "\u6210\u529F!";

   learn["Fail"] = "\u5931\u8D25";

})(learn || (learn = {}));

对比数字枚举, 少了 反向映射, 就是普通的赋值. 只有 key 和 值. 不可以通过 value 索引 key 值.  

所以字符串的枚举, 只要有一个是字符串, 所有的成员都得赋值 

enum learn {

   Success = '成功!',

   Fail //报错

}

异构枚举

enum learn {

   math,

   Success = '成功!',

}

混用字符串枚举和数字枚举 , 不建议使用

常量枚举

此处高度注意, 很多刚接触 typescript 的总会犯这个错, 总是习惯性给 enum 添加一个 const . 然后就报错了. 

原因: 用 const 声明的 enum , 在编译阶段会被删除. 

const enum learn {

   math,

   language,

   sports

}

在编译之后, 空空如也: 

当我们不需要一个对象, 但需要值的话, 就可以使用这个方法 , 可以减少运行时的代码 ,如下:  

枚举成员

1. 成员是只读的, 不可以修改

enum learn {

   math = 2,

   language,

   sports

}

learn.math = 2  // 报错

2. 枚举成员可以是 常量, 表达式, 也可以是变量

enum learn {

   a,

   b = 2,

   c = 1 + 3, //表达式

   e = '123'.length

}

3. 枚举是在运行时真正存在的对象, 可以传递给对象使用

enum E {

   X, Y, Z

}

function f(obj: { X: number }) {

   return obj.X;

}

f(E); //1

枚举合并

可以分开声明枚举, 结果会自动合并. 实际场景还是推荐写在一起, 不推荐. 

总结

本节深入理解了枚举类型. 了解了常用的枚举以及坑出没. 下一节我们将讲解Typescript 接口,  欢迎关注 ,长期连载

最后

最后

- 欢迎加我微信(A18814127),拉你进技术群，长期交流学习

- 欢迎关注「前端加加」,认真学前端，做个有专业的技术人

原创不易，如果觉得有点用，希望可以随手转发或者”在看“，拜谢各位老铁。

点击在看