TypeScript中Enum類型的具體使用
1. Enum類型簡介
Enum是ts新增的一種數(shù)據(jù)結(jié)構(gòu)和類型,稱為枚舉。
相當(dāng)于一個(gè)容器,用來存放常量,因?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 語法都是類型語法,編譯后會(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或這沒有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可以通過成員值獲得成員名。
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)文章
JavaScript簡單實(shí)現(xiàn)關(guān)鍵字文本搜索高亮顯示功能示例
這篇文章主要介紹了JavaScript簡單實(shí)現(xiàn)關(guān)鍵字文本搜索高亮顯示功能,涉及javascript基于事件響應(yīng)的頁面元素遍歷、分割、替換等相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
了解在JavaScript中將值轉(zhuǎn)換為字符串的5種方法
這篇文章主要介紹了在JavaScript中將值轉(zhuǎn)換為字符串的5種方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,下面小編就和大家一起來學(xué)習(xí)下吧2019-06-06
JavaScript實(shí)現(xiàn)一鍵復(fù)制文本功能的示例代碼
這篇文章主要為大家介紹兩種javascript實(shí)現(xiàn)文本復(fù)制(將文本寫入剪貼板)的方法,文中的示例代碼講解詳細(xì),大家可以根據(jù)需求特點(diǎn)選用2023-03-03
js禁止document element對(duì)象選中文本實(shí)現(xiàn)代碼
禁止document element對(duì)象選中文本在某在情況下還是很有必要的接下來本文將使用js實(shí)現(xiàn),感興趣的各位可以參考下哈2013-03-03
js實(shí)現(xiàn)自定義滾動(dòng)條的示例
這篇文章主要介紹了js實(shí)現(xiàn)自定義滾動(dòng)條的示例,幫助大家制作JS特效,美化自身網(wǎng)頁,感興趣的朋友可以了解下2020-10-10
javascript動(dòng)態(tài)創(chuàng)建鏈接的方法
這篇文章主要介紹了javascript動(dòng)態(tài)創(chuàng)建鏈接的方法,涉及javascript動(dòng)態(tài)操作頁面元素的技巧,需要的朋友可以參考下2015-05-05

