TypeScript中枚舉類型的理解與應(yīng)用場(chǎng)景
一、是什么
枚舉是一個(gè)被命名的整型常數(shù)的集合，用于聲明一組命名的常數(shù),當(dāng)一個(gè)變量有幾種可能的取值時(shí),可以將它定義為枚舉類型
通俗來說，枚舉就是一個(gè)對(duì)象的所有可能取值的集合
在日常生活中也很常見，例如表示星期的SUNDAY、MONDAY、TUESDAY、WEDNESDAY、THURSDAY、FRIDAY、SATURDAY就可以看成是一個(gè)枚舉
枚舉的說明與結(jié)構(gòu)和聯(lián)合相似，其形式為：
enum 枚舉名{
標(biāo)識(shí)符①[=整型常數(shù)],
標(biāo)識(shí)符②[=整型常數(shù)],
...
標(biāo)識(shí)符N[=整型常數(shù)],
}枚舉變量;
二、使用
枚舉的使用是通過enum關(guān)鍵字進(jìn)行定義，形式如下：
enum xxx { ... }
聲明關(guān)鍵字為枚舉類型的方式如下：
// 聲明d為枚舉類型Direction let d: Direction;
類型可以分成：
- 數(shù)字枚舉
- 字符串枚舉
- 異構(gòu)枚舉
數(shù)字枚舉
當(dāng)我們聲明一個(gè)枚舉類型是,雖然沒有給它們賦值,但是它們的值其實(shí)是默認(rèn)的數(shù)字類型,而且默認(rèn)從0開始依次累加:
enum Direction {
Up, // 值默認(rèn)為 0
Down, // 值默認(rèn)為 1
Left, // 值默認(rèn)為 2
Right // 值默認(rèn)為 3
}
console.log(Direction.Up === 0); // true
console.log(Direction.Down === 1); // true
console.log(Direction.Left === 2); // true
console.log(Direction.Right === 3); // true
如果我們將第一個(gè)值進(jìn)行賦值后，后面的值也會(huì)根據(jù)前一個(gè)值進(jìn)行累加1：
enum Direction {
Up = 10,
Down,
Left,
Right
}
console.log(Direction.Up, Direction.Down, Direction.Left, Direction.Right); // 10 11 12 13
字符串枚舉
枚舉類型的值其實(shí)也可以是字符串類型：
enum Direction {
Up = 'Up',
Down = 'Down',
Left = 'Left',
Right = 'Right'
}
console.log(Direction['Right'], Direction.Up); // Right Up
如果設(shè)定了一個(gè)變量為字符串之后，后續(xù)的字段也需要賦值字符串，否則報(bào)錯(cuò)：
enum Direction {
Up = 'UP',
Down, // error TS1061: Enum member must have initializer
Left, // error TS1061: Enum member must have initializer
Right // error TS1061: Enum member must have initializer
}
異構(gòu)枚舉
即將數(shù)字枚舉和字符串枚舉結(jié)合起來混合起來使用，如下：
enum BooleanLikeHeterogeneousEnum {
No = 0,
Yes = "YES",
}
通常情況下我們很少會(huì)使用異構(gòu)枚舉
本質(zhì)
現(xiàn)在一個(gè)枚舉的案例如下：
enum Direction {
Up,
Down,
Left,
Right
}
通過編譯后，javascript如下：
var Direction;
(function (Direction) {
Direction[Direction["Up"] = 0] = "Up";
Direction[Direction["Down"] = 1] = "Down";
Direction[Direction["Left"] = 2] = "Left";
Direction[Direction["Right"] = 3] = "Right";
})(Direction || (Direction = {}));
上述代碼可以看到， Direction[Direction["Up"] = 0] = "Up"可以分成
- Direction["Up"] = 0
- Direction[0] = "Up"
所以定義枚舉類型后，可以通過正反映射拿到對(duì)應(yīng)的值，如下：
enum Direction {
Up,
Down,
Left,
Right
}
console.log(Direction.Up === 0); // true
console.log(Direction[0]); // Up
并且多處定義的枚舉是可以進(jìn)行合并操作，如下：
enum Direction {
Up = 'Up',
Down = 'Down',
Left = 'Left',
Right = 'Right'
}
enum Direction {
Center = 1
}
編譯后，js代碼如下：
var Direction;
(function (Direction) {
Direction["Up"] = "Up";
Direction["Down"] = "Down";
Direction["Left"] = "Left";
Direction["Right"] = "Right";
})(Direction || (Direction = {}));
(function (Direction) {
Direction[Direction["Center"] = 1] = "Center";
})(Direction || (Direction = {}));
可以看到，Direction對(duì)象屬性回疊加
三、應(yīng)用場(chǎng)景
就拿回生活的例子，后端返回的字段使用 0 - 6 標(biāo)記對(duì)應(yīng)的日期，這時(shí)候就可以使用枚舉可提高代碼可讀性，如下：
enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};
console.log(Days["Sun"] === 0); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true
包括后端日常返回0、1 等等狀態(tài)的時(shí)候，我們都可以通過枚舉去定義，這樣可以提高代碼的可讀性，便于后續(xù)的維護(hù)
參考文獻(xiàn)
https://zh.wikipedia.org/wiki/%E6%9E%9A%E4%B8%BE
總結(jié)
到此這篇關(guān)于TypeScript中枚舉類型的理解與應(yīng)用場(chǎng)景的文章就介紹到這了,更多相關(guān)TypeScript枚舉類型內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript對(duì)象的四種創(chuàng)建方法
這篇文章主要介紹了JavaScript對(duì)象的四種創(chuàng)建方法，首先我們通過確定一個(gè)對(duì)象的屬性和方法展開主題相關(guān)內(nèi)容，需要的小伙伴可以參考一下2022-08-08
在真正的Web站點(diǎn)和應(yīng)用程序中，幾乎不可能創(chuàng)建名為ClassA和ClassB的類，更可能的是創(chuàng)建表示特定事物（如形狀）的類?？紤]本章開頭所述的形狀的例子，Polygon、Triangle和Rectangle類就構(gòu)成了一組很好的探討數(shù)據(jù)。2009-08-08
一個(gè)極為簡(jiǎn)單的requirejs實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄粋€(gè)極為簡(jiǎn)單的requirejs實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
SVG.js是一個(gè)輕量級(jí)的JavaScript庫(kù)，允許你輕松操作SVG和定義動(dòng)畫。這篇文章主要介紹了Svg.js實(shí)例教程及使用手冊(cè)詳解（一） 的相關(guān)資料,需要的朋友可以參考下2016-05-05
Jquery實(shí)現(xiàn)的tab效果可以指定默認(rèn)顯示第幾頁
tab效果想必大家在網(wǎng)上都有見過很多吧，在本文將為大家介紹下如何實(shí)現(xiàn)可以在代碼里面指定默認(rèn)顯示第幾頁的tab效果，感興趣的朋友不要錯(cuò)過2013-10-10
js實(shí)現(xiàn)點(diǎn)擊按鈕后給Div圖層設(shè)置隨機(jī)背景顏色的方法
這篇文章主要介紹了js實(shí)現(xiàn)點(diǎn)擊按鈕后給Div圖層設(shè)置隨機(jī)背景顏色的方法,實(shí)例分析了javascript操作頁面div元素屬性及隨機(jī)數(shù)的相關(guān)技巧,需要的朋友可以參考下2015-05-05
JS實(shí)現(xiàn)基本的網(wǎng)頁計(jì)算器功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)基本的網(wǎng)頁計(jì)算器功能,涉及JavaScript事件響應(yīng)及數(shù)值運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2020-01-01
異步動(dòng)態(tài)加載JS并運(yùn)行(示例代碼)
這篇文章主要是對(duì)異步動(dòng)態(tài)加載JS并運(yùn)行的示例代碼進(jìn)行了介紹。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
js+canvas實(shí)現(xiàn)兩張圖片合并成一張圖片的方法
這篇文章主要介紹了js+canvas實(shí)現(xiàn)兩張圖片合并成一張圖片的方法,結(jié)合實(shí)例形式分析了JavaScript結(jié)合HTML5 canvas實(shí)現(xiàn)圖片合并的操作技巧,并附帶了Java圖片合并的實(shí)現(xiàn)方法,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了只要1K大小，純JS腳本送你一朵3D玫瑰花，屬于你的情人節(jié)專屬玫瑰，感興趣的小伙伴們可以參考一下2016-08-08