TypeScript枚舉類型
1.概述
所謂的枚舉類型就是為一組數(shù)值賦予名字。
enum
類型在C++、Java
語言中比較常見,TypeScript
在JavaScript
原有的類型基礎(chǔ)上也增加了enum
類型。
比如我們需要定義一組角色,需要使用數(shù)字表示,就可以使用如下代碼定位:
enum role{ STUDENT, TEACHER, ADMIN }
上面代碼中我們定義了role為一個枚舉類型,這個里面有是三個值,TypeScript會為每個值自動的分配序號,默認從0開始依次排列,它們的值依次為0 1 2。
當(dāng)然我們也可以自定義每個值,如果非全部定義則后面的值會根據(jù)前面的值自增。
示例代碼如下:
enum role1 { student = 1, // 后面兩個值依次為2 3 teacher, admin, } enum role2 { // 每個名具有指定的值 student = 1, teacher = 3, admin = 6, }
2.數(shù)字枚舉
我們上面介紹的例子就是數(shù)字枚舉類型,但是還有一個注意點就是如果某個字段使用了常量或者計算后的值 ,我們就必須設(shè)置緊跟著字段的初始值 ,否則將會拋出異常。
示例代碼如下:
;(function () { // 定義一個函數(shù) const getValue: () => number = (): number => { return 0 } enum role1 { student = getValue(), // teacher, // error 枚舉成員必須具有初始化表達式。 // admin, // error 枚舉成員必須具有初始化表達式。 } const TEACHER_ROLE: number = 3 // 每個名具有指定的值 enum role2 { student, teacher = TEACHER_ROLE, // admin, // error 枚舉成員必須具有初始化表達式。 } })()
2.1反向映射
所謂的反向映射就是可以通過key
訪問到value
,通過value訪問到key。
我們可以通過.名稱或者['名稱']的方式取到每個具體的值,也可以通過[數(shù)值]的方式取到每個數(shù)值對應(yīng)的名稱,
示例代碼如下:
enum role { student, teacher, admin, } console.log(role.admin) // 2 console.log(role['teacher']) //1 console.log(role[0]) //‘student'
其實TypeScript
中的枚舉類型編譯成JavaScript代碼之后就是一個對象,我們將上面那個枚舉類型編譯一下,
編譯后的代碼如下:
"use strict"; var role; (function (role) { role[role["student"] = 0] = "student"; role[role["teacher"] = 1] = "teacher"; role[role["admin"] = 2] = "admin"; })(role || (role = {}));
這樣看我們可能好理解,其實就是通過一個自調(diào)函數(shù)將值賦值給role對象,賦值之后如下:
var role = { "student": 0, "teacher": 1, "admin" : 2, 0: "student", 1: "teacher", 2: "admin", }
值得注意的是 反向映射僅僅支持在數(shù)字枚舉 中,不支持在2.4版本中新增的字符串枚舉 中。
3.字符串枚舉
所謂的字符串枚舉就是枚舉中的每個字段的值必須都是字符串,或者是枚舉中的其他字段,
示例代碼如下:
enum Person { name = '一碗周', hobby = 'coding', // 設(shè)置枚舉中的字段作為值 myName = name, } console.log(Person.name, Person.myName) // 一碗周 一碗周
4.const枚舉
在我們定義了普通枚舉之后,被編譯成JavaScript
代碼之后會創(chuàng)建一個對應(yīng)的對象,如果使用枚舉是增了增加程序的可讀性,且并不需要編譯之后的對象。在TypeScript1.4
中增加了const
枚舉。
const
枚舉被翻譯為完全嵌入枚舉 ,所謂的完全嵌入枚舉就是編譯之后沒有對應(yīng)的對象,只是從枚舉中拿到對應(yīng)你的值然后進行替換。定義const
枚舉只需要在普通枚舉前面加上const關(guān)鍵字。
示例代碼如下:
const enum role { student, teacher, admin, } let admin = role.admin
如上代碼會被編譯為如下:
let admin = 2 /* admin */;
5.總結(jié)
這篇文章介紹了兩種基本的枚舉類型:數(shù)字枚舉 和字符串枚舉 ,數(shù)組枚舉還有一個反射映射的概念,就是可以通過key訪問value,通過value
可以訪問key;最后我們還介紹了const枚舉,就是編譯后不生成所謂的枚舉對象。
到此這篇關(guān)于TypeScript
枚舉類型的文章就介紹到這了,更多相關(guān)TypeScript枚舉 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS跨域(Access-Control-Allow-Origin)前后端解決方案詳解
這篇文章主要介紹了瀏覽器跨域(Access-Control-Allow-Origin)解決方案詳解包括了前端跨域,后端跨域,js原生實現(xiàn)jsonp,jQuery實現(xiàn)jsonp,vue.js實現(xiàn)jsonp,需要的朋友可以參考下2022-01-01詳解微信小程序如何實現(xiàn)類似ChatGPT的流式傳輸
這篇文章主要為大家介紹了微信小程序如何實現(xiàn)類似ChatGPT的流式傳輸示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-03-03微信小程序?qū)崿F(xiàn)多個按鈕toggle功能的實例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)多個按鈕toggle功能的實例的相關(guān)資料,需要的朋友可以參考下2017-06-06Three.js添加陰影和簡單后期處理實現(xiàn)示例詳解
這篇文章主要為大家介紹了Three.js添加陰影和簡單后期處理實現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-04-04js前端表單數(shù)據(jù)處理表單數(shù)據(jù)校驗
這篇文章主要為大家介紹了js前端表單數(shù)據(jù)處理表單數(shù)據(jù)校驗示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-07-07