1. Enum類型簡介

Enum是ts新增的一種數據結構和類型，稱為枚舉。

相當于一個容器，用來存放常量，因為開發(fā)中經常需要定義一組相關的常量。使用時就跟對象屬性寫法一樣。

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 結構本身也是一種類型。比如，上例的變量c等于1，它的類型可以是 Color，也可以是number。

Enum 結構的特別之處在于，它既是一種類型，也是一個值。絕大多數 ts 語法都是類型語法，編譯后會全部去除，但是 Enum 結構是一個值，編譯后會變成 JavaScript 對象，留在代碼中。

// 編譯前
enum Color {
  Red,     // 0
  Green,   // 1
  Blue     // 2
}

// 編譯后
let Color = {
  Red: 0,
  Green: 1,
  Blue: 2
};

Enum結構編譯后是一個對象，所以不能有同名的對象、函數和類等。

2. Enum成員的值

Enum 成員默認不必賦值，系統(tǒng)會從零開始逐一遞增，按照順序為每個成員賦值，比如0、1、2……也可以為 Enum 成員顯式賦值，可以是任意數值，但不能是大整數(Bigint)。

成員的值可以相同。如果只設置第一個成員的值，后面的成員的值默認遞增。成員的值也可以使用計算式。所有成員的值都是只讀的，不能修改。

因為成員的值不能修改，所以可以加上const修飾，表示常量，加上const編譯后不會轉成對象，而是變成對應的常量。如果加上const，還想轉成對象，可以將編譯選項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的合并

就是多個同名的Enum結構會自動合并

enum Foo {
  A,
}

enum Foo {
  B = 1,
}

enum Foo {
  C = 2,
}

// 等同于
enum Foo {
  A,
  B = 1，
  C = 2
}

合并規(guī)則

• 只允許其中一個的首成員省略初始化，否則會報錯，就是多個同名的，只能有一個的首成員可以省略初始值，其他的首成員必須初始化值，對于不是首成員的不管。
• 合并時不能有同名成員，否則報錯
• 必須同為const或這沒有const，不能混合

特點：補充外部定義的Enum結構

4. 字符串Enum

Enum成員不僅可以設為數值，也能設為字符串。也就是一組相關的字符串集合。

對于字符串枚舉的成員必須定義值，要是不定義值默認為數值，并且需要在顯示設置的值的成員前面。

成員可以是字符串也是數值，不允許使用其他類型的值。

如果變量類型是字符串Enum，就不能在進行賦值為字符串，跟數值Enum不一樣。

enum MyEnum {
  One = 'One',
  Two = 'Two',
}

let s = MyEnum.One;
s = 'One'; // 報錯

因為變量類型為字符串Enum時，不能再進行修改，所以如果函數的參數類型是字符串Enum時，直接傳入字符串會報錯，可以起到限定函數參數的作用。

字符串Enum的成員值不能使用表達式賦值。

enum MyEnum {
  A = 'one',
  B = ['T', 'w', 'o'].join('') // 報錯
}

5. keyof運算符

keyof運算符可以取出Enum結構的所有成員名，返回聯(lián)合類型。

在使用的使用必須使用typeof，因為Enum類型本質是number和string的一種變體。如果不使用typeof就相當于keyof number,而有了typeof，typeof會把一個值轉為對象類型，然后keyof運算符返回該對象的所有屬性名。

enum MyEnum {
  A = 'a',
  B = 'b'
}

// 'A'|'B'
type Foo = keyof typeof MyEnum;

如果要返回Enum所有的成員值，可以使用in運算符

enum MyEnum {
  A = 'a',
  B = 'b'
}

// { a: any, b: any }
type Foo = { [key in MyEnum]: any };

6. 反向映射

對于數值Enum可以通過成員值獲得成員名。

enum Weekdays {
  Monday = 1,
  Tuesday,
  Wednesday,
  Thursday,
  Friday,
  Saturday,
  Sunday
}

console.log(Weekdays[3]) // Wednesday

到此這篇關于TypeScript中Enum類型的具體使用的文章就介紹到這了,更多相關TypeScript Enum類型內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論