《二》大话 Typescript 枚举

前言: 本文章为 TypeScript 系列文章. 旨在利用碎片时间快速入门 Typescript. 或重新温故 Typescript 查漏补缺.在官方 api 的基础上, 加上一些日常使用的感想. 如果感兴趣的话~ 欢迎关注, 后续持续推出文章.

文章列表:

《一》大话 TypeScript 基本类型
《二》大话 Typescript 枚举
《三》大话 Typescript 接口
……

目录结构

数字枚举
字符串枚举
异构枚举
常量枚举
枚举成员
枚举合并
外部枚举
总结

数字枚举

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

enum learn { 
    math,
    language,
    sports
}
console.log(learn.math) // 0 
console.log(learn.language) // 1
console.log(learn.sports) // 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 枚举的实现原理

var learn;
(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: 任何一个语法都可以放在官网下看它的实现原理官网

字符串枚举

enum learn { 
    Success = '成功!',
    Fail= '失败'
}

同样, 看一下实现的原理

var learn;
(function (learn) {
    learn[learn["math"] = 0] = "math";
    learn["Success"] = "\u6210\u529F!";
})(learn || (learn = {}));

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

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

enum learn {
   Success = '成功!',
   Fail //报错
}

异构枚举

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

enum learn {
    math,
    Success = '成功!',
}

常量枚举

此处高度注意, 很多刚接触 typescript 的总会犯这个错, 总是习惯性给 enum 添加一个 const . 如下:

const enum E {
   X, Y, Z
}

function f(obj: { X: number }) {
   return obj.X;
}

f(E); //报错

我们看看编译后的代码

function f(obj) {
    return obj.X;
}
f(E); //报错

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

const enum learn { 
    math,
    language,
    sports
}

在编译之后, 空空如也:

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

枚举成员

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

enum learn { 
    math = 2,
    language,
    sports
}
learn.math = 2  // 报错

枚举成员可以是常量, 也可以是变量

enum learn {
    a,
    b = 2,
    c = 1 + 3, //表达式
    e = '123'.length
}

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

enum E {
    X, Y, Z
}
function f(obj: { X: number }) {
    return obj.X;
}
f(E); //1

枚举合并

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

总结

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

最后

欢迎加我微信(A18814127),拉你进技术群，长期交流学习
欢迎关注「前端加加」,认真学前端，做个有专业的技术人