官方定義

使用枚舉我們可以定義一些帶名字的常量。 使用枚舉可以清晰地表達(dá)意圖或創(chuàng)建一組有區(qū)別的用例。 TypeScript支持?jǐn)?shù)字的和基于字符串的枚舉。枚舉使用  enum  關(guān)鍵字來定義。

理解:

枚舉是列舉固定幾個(gè)值，用于取值被限定在一定范圍內(nèi)的場(chǎng)景，比如一周只能有七天，顏色限定為紅綠藍(lán)等。

直接定義變量的話的話可以隨意定義，枚舉只能使用你定義好的幾個(gè)值

例如你定義一個(gè)方法接收一個(gè)參數(shù)，這個(gè)參數(shù)如果是int型，別人在調(diào)用你這個(gè)方法時(shí)可以傳1或2等任意數(shù)字，雖然你告訴了同事，只能傳0或1,如果你把參數(shù)定義成只能傳某個(gè)類型，例如是個(gè)枚舉類，那么別人只能傳你枚舉類里定義好的幾個(gè)類型，傳其它的就會(huì)在編譯時(shí)期報(bào)錯(cuò)。

按照枚舉成員分類（數(shù)字、字符串、異構(gòu)）

一、數(shù)字枚舉

例1

enum Direction {
    Up, // 0
    Down,// 1
    Left,// 2
    Right// 3
}

例2

enum Direction {
    Up = 1,// 1
    Down,// 2
    Left,// 3
    Right// 4
}

例3

enum Direction {
    Up,// 0
    Down=3,// 3
    Left,// 4
    Right// 5
}

例4

enum Days {Sun = 3, Mon = 1, Tue, Wed, Thu, Fri, Sat};
console.log(Days["Sun"] === 3); // true
console.log(Days["Wed"] === 3); // true
console.log(Days[3] === "Sun"); // false
console.log(Days[3] === "Wed"); // true

以上四個(gè)例子我們可以看出

• 數(shù)字枚舉如果沒有初始化，默認(rèn)初始化值為0，每項(xiàng)+1
• 如果有初始化，則在初始化值的基礎(chǔ)上，每項(xiàng)+1
• 如果某項(xiàng)被賦值（可以是負(fù)數(shù)或負(fù)數(shù)），那么之后的項(xiàng)在此基礎(chǔ)上+1
• 如果未手動(dòng)賦值的枚舉項(xiàng)與手動(dòng)賦值的重復(fù)了，如例4，TypeScript 是不會(huì)察覺到這一點(diǎn)的，但建議盡量避免

反向映射

除了創(chuàng)建一個(gè)以屬性名做為對(duì)象成員的對(duì)象之外，數(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
console.log(Days[0] === "Sun"); // true
console.log(Days[1] === "Mon"); // true
console.log(Days[2] === "Tue"); // true
console.log(Days[6] === "Sat"); // true

二、字符串枚舉

在一個(gè)字符串枚舉里，每個(gè)成員都必須用字符串字面量，或另外一個(gè)字符串枚舉成員進(jìn)行初始化。

enum Direction {
    Up = "UP",
    Down = "DOWN",
    Left = "LEFT",
    Right = "RIGHT",
}

三、異構(gòu)枚舉

將數(shù)字枚舉與字符串枚舉混用，但不建議

enum BooleanLikeHeterogeneousEnum {
    No = 0,
    Yes = "YES",
}

按照聲明方式（普通枚舉，const 枚舉，外部枚舉，外部常量枚舉）

一、普通枚舉 

上述例子都是常數(shù)項(xiàng)

值由計(jì)算所得變?yōu)橛?jì)算所得項(xiàng)

如， "blue".length  就是一個(gè)計(jì)算所得項(xiàng)

enum Color {Red, Green, Blue = "blue".length};

以下情況不被允許

enum Color {Red = "red".length, Green, Blue};

根據(jù)官方定義，不帶初始化器的枚舉要么被放在第一的位置，要么被放在使用了數(shù)字常量或其它常量初始化了的枚舉后面。

上述代碼會(huì)報(bào)錯(cuò)，因?yàn)镽ed是計(jì)算項(xiàng)，而Green緊接其后卻無法獲取初始值

二、常數(shù)枚舉 （ const enum  定義的枚舉）

const enum Directions {
    Up,
    Down,
    Left,
    Right
}
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

會(huì)被編譯為

var directions = [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];

常數(shù)枚舉與普通枚舉的區(qū)別是，它會(huì)在編譯階段被刪除，并且不能包含計(jì)算成員，假如包含了計(jì)算成員，則會(huì)在編譯階段報(bào)錯(cuò)。

三、外部枚舉（ declare enum  定義的枚舉）

種聲明枚舉的方式比較特別，使用的時(shí)候需要非常謹(jǐn)慎，該枚舉類型不會(huì)生成反向映射

// 聲明語 + 關(guān)鍵詞 + 枚舉名稱
declare enum ChineseZodiac {
  rat = 1,
  cattle,
  tiger,
  rabbit,
  dragon
}
console.log(ChineseZodiac)
console.log(ChineseZodiac.rat)

你會(huì)發(fā)現(xiàn)，無論你是訪問枚舉本身還是內(nèi)部成員，均會(huì)報(bào)錯(cuò)： ChineseZodiac is not defined編譯之后并沒有生成該枚舉，也就是說，聲明的外部枚舉是沒有被編譯的，導(dǎo)致在 runtime 的時(shí)候就會(huì)報(bào)錯(cuò)這就讓人很頭疼，既然不能訪問，那為何要能做出這個(gè)聲明呢。

官網(wǎng)對(duì)其的描述是：外部枚舉用來描述已經(jīng)存在的枚舉類型的形狀，這樣聽起來很晦澀。

通過代碼來分析

外部枚舉是為了描述當(dāng)前環(huán)境中已經(jīng)存在的對(duì)象的,這個(gè)對(duì)象可以存在任意的地方，但是一定是已聲明的；1-1- 一個(gè) .html 后綴文件，為了引入 .ts 文件編譯之后的結(jié)果，用于調(diào)試

1-2- .ts 源文件

1-3- 編譯之后的 .js 文件

1-4- 其他 .js 資源文件

1-5- 訪問結(jié)果

會(huì)發(fā)現(xiàn)是不會(huì)報(bào)錯(cuò)的，但是你可能會(huì)疑問了，這個(gè)不就是訪問自己聲明的一個(gè)變量嗎，那跟 .ts 文件中聲明的枚舉有什么關(guān)系？圖樣圖森破，外部枚舉類似于 ts 的類型斷言，只要在開發(fā)中有這個(gè)聲明，意味著在當(dāng)前開發(fā)環(huán)境上下文中一定存在當(dāng)前這個(gè)對(duì)象，你可以隨意使用當(dāng)前對(duì)象；當(dāng)然也就意味著你聲明外部枚舉的時(shí)候慎重，我是否真的需要這樣做，不然 runtime 使用的時(shí)候就出錯(cuò)了；

外部枚舉還可以防止聲明枚舉的命名沖突和成員沖突

2-1- 我在上面文件結(jié)構(gòu)基礎(chǔ)上新增了一個(gè) enum.ts 文件，并在里面聲明了一個(gè)普通枚舉，但是枚舉成員和外部枚舉成員相同

2-2- 之所以會(huì)有這樣的提示，是 declare 的作用，因?yàn)?ts 類型系統(tǒng)能夠偵測(cè)到當(dāng)前整個(gè)文件目錄上下文中的所有 declare 聲明的變量，編譯器也會(huì)有語法提示；

四、外部常量枚舉（declare 和 const 關(guān)鍵詞聯(lián)合聲明）

這個(gè)枚舉類型和 const 枚舉類型并沒有什么區(qū)別，只是會(huì)提示是否有枚舉命名沖突和成員沖突，該枚舉類型不會(huì)生成反向映射

// 聲明語 + 修飾符 + 關(guān)鍵詞 + 枚舉名稱
declare const enum ChineseZodiac {
  rat = 1,
  cattle,
  tiger,
  rabbit,
  dragon
}
ChineseZodiac.dragon => 5/* dragon */

 到此這篇關(guān)于typescript枚舉的具體使用的文章就介紹到這了,更多相關(guān)typescript枚舉內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論