《二》大话 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
}
复制代码

在编译以后, 空空如也:

当咱们不须要一个对象, 但须要值的话, 就可使用这个方法 , 能够减小运行时的代码 ,以下:

枚举成员

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),拉你进技术群，长期交流学习
• 欢迎关注「前端加加」,认真学前端，作个有专业的技术人