TypeScript中Enum類型的具體使用
1. Enum類型簡(jiǎn)介
Enum是ts新增的一種數(shù)據(jù)結(jié)構(gòu)和類型,稱為枚舉。
相當(dāng)于一個(gè)容器,用來(lái)存放常量,因?yàn)殚_發(fā)中經(jīng)常需要定義一組相關(guān)的常量。使用時(shí)就跟對(duì)象屬性寫法一樣。
enum Color { Red, // 0 Green, // 1 Blue // 2 } let c = Color.Green; // 1 // 等同于 let c = Color['Green']; // 1 let c:Color = Color.Green; // 正確 let c:number = Color.Green; // 正確
Enum 結(jié)構(gòu)本身也是一種類型。比如,上例的變量c
等于1
,它的類型可以是 Color,也可以是number
。
Enum 結(jié)構(gòu)的特別之處在于,它既是一種類型,也是一個(gè)值。絕大多數(shù) ts 語(yǔ)法都是類型語(yǔ)法,編譯后會(huì)全部去除,但是 Enum 結(jié)構(gòu)是一個(gè)值,編譯后會(huì)變成 JavaScript 對(duì)象,留在代碼中。
// 編譯前 enum Color { Red, // 0 Green, // 1 Blue // 2 } // 編譯后 let Color = { Red: 0, Green: 1, Blue: 2 };
Enum結(jié)構(gòu)編譯后是一個(gè)對(duì)象,所以不能有同名的對(duì)象、函數(shù)和類等。
2. Enum成員的值
Enum 成員默認(rèn)不必賦值,系統(tǒng)會(huì)從零開始逐一遞增,按照順序?yàn)槊總€(gè)成員賦值,比如0、1、2……也可以為 Enum 成員顯式賦值,可以是任意數(shù)值,但不能是大整數(shù)(Bigint)。
成員的值可以相同。如果只設(shè)置第一個(gè)成員的值,后面的成員的值默認(rèn)遞增。成員的值也可以使用計(jì)算式。所有成員的值都是只讀的,不能修改。
因?yàn)槌蓡T的值不能修改,所以可以加上const修飾,表示常量,加上const編譯后不會(huì)轉(zhuǎn)成對(duì)象,而是變成對(duì)應(yīng)的常量。如果加上const,還想轉(zhuǎn)成對(duì)象,可以將編譯選項(xiàng)preserveConstEnums打開。
const enum Color { Red, Green, Blue } const x = Color.Red; const y = Color.Green; const z = Color.Blue; // 編譯后 const x = 0 /* Color.Red */; const y = 1 /* Color.Green */; const z = 2 /* Color.Blue */;
3. 同名Enum的合并
就是多個(gè)同名的Enum結(jié)構(gòu)會(huì)自動(dòng)合并
enum Foo { A, } enum Foo { B = 1, } enum Foo { C = 2, } // 等同于 enum Foo { A, B = 1, C = 2 }
合并規(guī)則
- 只允許其中一個(gè)的首成員省略初始化,否則會(huì)報(bào)錯(cuò),就是多個(gè)同名的,只能有一個(gè)的首成員可以省略初始值,其他的首成員必須初始化值,對(duì)于不是首成員的不管。
- 合并時(shí)不能有同名成員,否則報(bào)錯(cuò)
- 必須同為const或這沒(méi)有const,不能混合
特點(diǎn):補(bǔ)充外部定義的Enum結(jié)構(gòu)
4. 字符串Enum
Enum成員不僅可以設(shè)為數(shù)值,也能設(shè)為字符串。也就是一組相關(guān)的字符串集合。
對(duì)于字符串枚舉的成員必須定義值,要是不定義值默認(rèn)為數(shù)值,并且需要在顯示設(shè)置的值的成員前面。
成員可以是字符串也是數(shù)值,不允許使用其他類型的值。
如果變量類型是字符串Enum,就不能在進(jìn)行賦值為字符串,跟數(shù)值Enum不一樣。
enum MyEnum { One = 'One', Two = 'Two', } let s = MyEnum.One; s = 'One'; // 報(bào)錯(cuò)
因?yàn)樽兞款愋蜑樽址瓻num時(shí),不能再進(jìn)行修改,所以如果函數(shù)的參數(shù)類型是字符串Enum時(shí),直接傳入字符串會(huì)報(bào)錯(cuò),可以起到限定函數(shù)參數(shù)的作用。
字符串Enum的成員值不能使用表達(dá)式賦值。
enum MyEnum { A = 'one', B = ['T', 'w', 'o'].join('') // 報(bào)錯(cuò) }
5. keyof運(yùn)算符
keyof運(yùn)算符可以取出Enum結(jié)構(gòu)的所有成員名,返回聯(lián)合類型。
在使用的使用必須使用typeof,因?yàn)镋num類型本質(zhì)是number和string的一種變體。如果不使用typeof就相當(dāng)于keyof number,而有了typeof,typeof會(huì)把一個(gè)值轉(zhuǎn)為對(duì)象類型,然后keyof運(yùn)算符返回該對(duì)象的所有屬性名。
enum MyEnum { A = 'a', B = 'b' } // 'A'|'B' type Foo = keyof typeof MyEnum;
如果要返回Enum所有的成員值,可以使用in運(yùn)算符
enum MyEnum { A = 'a', B = 'b' } // { a: any, b: any } type Foo = { [key in MyEnum]: any };
6. 反向映射
對(duì)于數(shù)值Enum可以通過(guò)成員值獲得成員名。
enum Weekdays { Monday = 1, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday } console.log(Weekdays[3]) // Wednesday
到此這篇關(guān)于TypeScript中Enum類型的具體使用的文章就介紹到這了,更多相關(guān)TypeScript Enum類型內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序picker組件簡(jiǎn)單用法示例【附demo源碼下載】
這篇文章主要介紹了微信小程序picker組件簡(jiǎn)單用法,結(jié)合實(shí)例形式詳細(xì)分析了picker組件的功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-12-12electronjs實(shí)現(xiàn)打開的網(wǎng)頁(yè)密碼自動(dòng)保存功能(實(shí)現(xiàn)步驟)
在 Electron 的渲染進(jìn)程中,可以使用 webContents 對(duì)象來(lái)監(jiān)聽網(wǎng)絡(luò)請(qǐng)求,在 Electron 中實(shí)現(xiàn)自動(dòng)保存網(wǎng)頁(yè)密碼的功能涉及到幾個(gè)步驟,下面給大家分享實(shí)現(xiàn)思路,感興趣的朋友跟隨小編一起看看吧2024-08-08js事件驅(qū)動(dòng)機(jī)制 瀏覽器兼容處理方法
下面小編就為大家?guī)?lái)一篇js事件驅(qū)動(dòng)機(jī)制 瀏覽器兼容處理方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07uniapp單頁(yè)面實(shí)現(xiàn)頁(yè)面切換的使用示例
本文主要介紹了uniapp單頁(yè)面實(shí)現(xiàn)頁(yè)面切換的使用示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-09-09JS制作簡(jiǎn)單的三級(jí)聯(lián)動(dòng)
本文給大家分享的是使用javascript實(shí)現(xiàn)的一個(gè)簡(jiǎn)單的三級(jí)聯(lián)動(dòng)菜單,非常簡(jiǎn)單實(shí)用,有需要的小伙伴過(guò)來(lái)參考下吧。2015-03-03JavaScript實(shí)現(xiàn)計(jì)算字符串中出現(xiàn)次數(shù)最多的字符和出現(xiàn)的次數(shù)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)計(jì)算字符串中出現(xiàn)次數(shù)最多的字符和出現(xiàn)的次數(shù),本文直接給出實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-03-03