![TypeScript+Vue.js前端开发从入门到精通](https://wfqqreader-1252317822.image.myqcloud.com/cover/200/52842200/b_52842200.jpg)
上QQ阅读APP看书,第一时间看更新
2.3.2 枚举的编译原理
![](https://epubservercos.yuewen.com/CABD60/31397740404941606/epubprivate/OEBPS/Images/Figure-P51_19816.jpg?sign=1738863373-VaU33ywvSItOYhiXg1QzQy5uli1wqgik-0-8b4928d2c97a16b737f4af3ed6f6de1e)
JavaScript本身没有提供对枚举类型的支持,你是否思考过,TypeScript是使用什么数据结构来实现枚举的?我们先来看如下示例。
【源码见附件代码/第2章/6.enum/6.enum.ts】
![](https://epubservercos.yuewen.com/CABD60/31397740404941606/epubprivate/OEBPS/Images/Figure-P51_83033.jpg?sign=1738863373-PevWpTbhK8eOUmt6IcmQf4qIvkJFnYyN-0-ae6f9c6430060eade5147567169b7ef9)
从输出信息可以看到,当我们把枚举当成一个对象来使用时,语法上完全没有问题,而且通过枚举名可以取到枚举值,通过枚举值也可以取到枚举名。其实被TypeScript编译后,枚举就是一个对象,我们也可以直接将枚举进行打印,示例如下:
//{10: 'Success', 20: 'Fail', Success: 10, Fail: 20} console.log(Result);
要了解TypeScript的编译原理,最直接的方式是查看编译后的JavaScript文件,以上面的Result枚举为例,编译后的结果如下:
![](https://epubservercos.yuewen.com/CABD60/31397740404941606/epubprivate/OEBPS/Images/Figure-P51_83034.jpg?sign=1738863373-TconoyK16MPPWXr3H2Pt1KL4VBIlChYB-0-e64640b412419a42584eed3e1235c7d6)
可以看到,编译后的JavaScript代码实际上是定义了一个名为Result的变量,变量存储的数据是一个对象,对象中将枚举的值与枚举字符串格式的名字进行了映射,同时也反向进行了映射。如果我们定义的枚举本身就是字符串枚举,则编译的结果就更加简单了,例如:
![](https://epubservercos.yuewen.com/CABD60/31397740404941606/epubprivate/OEBPS/Images/Figure-P52_83036.jpg?sign=1738863373-HGtIEyXXipDXpkCZIzDgVBhG5CM2C3Pa-0-28faeb673bb9cdc46f778264fa30b947)
编译后的结果为:
![](https://epubservercos.yuewen.com/CABD60/31397740404941606/epubprivate/OEBPS/Images/Figure-P52_83037.jpg?sign=1738863373-MKgwKXACL9MTM3DSEZrvTiPlJC2qIbhZ-0-88f691577dddfbf3133fff53a6fb3098)
现在,回忆一下我们之前讲的常量定义枚举值与计算量定义枚举值会影响编译后的结果,是不是就更容易理解了?例如下面的枚举:
![](https://epubservercos.yuewen.com/CABD60/31397740404941606/epubprivate/OEBPS/Images/Figure-P52_83038.jpg?sign=1738863373-IkPjiEDkwHvUM3MRZdMDLJoteHUp08Jk-0-44ed9ca0ba58492f1b589011e6512f06)
编译后的结果如下:
![](https://epubservercos.yuewen.com/CABD60/31397740404941606/epubprivate/OEBPS/Images/Figure-P52_83039.jpg?sign=1738863373-nZJeT7A6AC8srnEGkaCt92qKeFmHdBZ1-0-6cfce516069cb51c719c71fd15446d91)