TypeScript 中的列舉詳解

---

在深入瞭解“列舉”之前，瞭解 TypeScript 中常用的“const”關鍵字至關重要。當我們宣告一個“const”變數時，我們就不能更改賦給它的值。

因此，列舉只不過是這些 const 資料型別的集合。我們可以使用“enum”關鍵字建立列舉。Enum 是 Enumerations 的縮寫，在列舉下宣告的每個常量變數都稱為該列舉的成員。

在本文中，我們將學習 TypeScript 中的列舉、其特性以及主要型別的列舉。

TypeScript 中列舉的特性

• TypeScript 中的列舉有一個令人驚訝的特性。如果我們不為列舉的成員變數賦值，它們將預設使用它們的索引值作為值。

• 列舉的每個成員都必須包含一個值。我們可以賦值一個常量，或者一個值也可以透過函式計算得出。如果以上情況都不存在，則列舉成員將儲存預設的常量值。

• 列舉成員也可以賦值常量表達式。TypeScript 中的任何常量表達式都在編譯時而不是執行時進行計算。

• 列舉可以作為引數傳遞給函式，透過函式計算，並返回給函式。

• TypeScript 中的列舉支援反向對映的概念。透過反向對映，我們可以透過其值訪問成員，也可以透過其索引成員訪問值。這個概念背後的思想是，列舉物件在內部以兩種方式儲存成員：透過其變數引用值，以及透過值引用列舉變數。由於 TypeScript 通常將程式碼轉換為 JavaScript，因此它支援反向對映。

• 字串列舉不支援反向對映；在異構列舉中，只有數字列舉支援反向對映。

• Const 列舉型別在編譯時被移除，並將被它們的值替換。因此，const 列舉比常規列舉更快，減少了在編譯時生成額外程式碼的複雜性。但是我們只能在 const 列舉中使用常量成員，而不能使用計算成員。

列舉的型別

數字列舉

在這種型別的列舉中，列舉的成員被賦予數值。數字列舉具有自動遞增的特性。例如，如果我們將數字 5 賦給列舉的第一個常量變數，那麼接下來的常量變數將賦值遞增 1 的值，例如，將 6 賦給列舉的第二個成員，將 7 賦給下一個成員，依此類推。

示例

在下面的示例中，我們建立了一個名為 color 的列舉型別。在 color 中，建立了四個 const 變數，名為 red、blue、yellow 和 pink。為了演示數字列舉的自動遞增特性，我們為前兩個 const 變數賦值，而將另外兩個留作預設值。讓我們看看輸出中的預設值。

//enum type color
enum color{
   //assign numeric value
   red = 1,
   blue = 3,
   pink,
   yellow
}
//print const variables values
console.log(color.red);
console.log(color.blue);
console.log(color.pink);
console.log(color.yellow);

編譯後，它將生成以下 JavaScript 程式碼

//enum type color
var color;
(function (color) {
   //assign numeric value
   color[color["red"] = 1] = "red";
   color[color["blue"] = 3] = "blue";
   color[color["pink"] = 4] = "pink";
   color[color["yellow"] = 5] = "yellow";
})(color || (color = {}));
//print const variables values
console.log(color.red);
console.log(color.blue);
console.log(color.pink);
console.log(color.yellow);

輸出

以上程式碼將產生以下輸出：

1
3
4
5

正如使用者在輸出中注意到的那樣，blue 之後接下來的 const 變數會自動賦值遞增 1 的預設值。

字串列舉

字串列舉類似於數字列舉，只是字串列舉的值用字串而不是數字賦值。字串列舉不具有自動遞增行為。

示例

在下面的示例中，我們建立了一個名為“names”的字串型別列舉。在建立的列舉下，我們聲明瞭四個變數 student1、student2、student3 和 student4。這些變數被賦予字串字面量。字串列舉型別中不儲存預設的字串值，如果未賦值，則只儲存數字值作為預設值。

enum names{
//assign string literal
   student1 = "john",
   student2 = "srujana",
   student3 = "sam",
   student4 = "ram"
}
//print const variables values
console.log(names.student1);
console.log(names.student2);
console.log(names.student3);
console.log(names.student4);

編譯後，它將生成以下 JavaScript 程式碼

var names;
(function (names) {
   //assign string literal
   names["student1"] = "john";
   names["student2"] = "srujana";
   names["student3"] = "sam";
   names["student4"] = "ram";
})(names || (names = {}));
//print const variables values
console.log(names.student1);
console.log(names.student2);
console.log(names.student3);
console.log(names.student4);

輸出

以上程式碼將產生以下輸出：

john
srujana
sam
ram

正如使用者在輸出中注意到的那樣，前三個列舉變數是字串型別。因此，這是一個字串型別的列舉。

異構列舉

這是數字列舉和字串列舉的組合。也就是說，在這種型別的列舉中，我們可以為其成員賦值字串值或數值。

示例

在下面的示例中，我們建立了一個 student 型別的列舉。在 student 中有四個 const 變數：name、roll_no、gender 和 mob_no。name 和 gender 是文字字串型別，而 roll_no 和 mob_no 是數值。

//enum type student
enum student{
   //assign string literal
   name = "srujana",
   roll_no = 15,
   gender = "female",
   mob_no = 9873890414
}
console.log(student.name);
console.log(student.roll_no);
console.log(student.gender);
console.log(student.mob_no);

編譯後，它將生成以下 JavaScript 程式碼

//enum type student
var student;
(function (student) {
   //assign string literal
   student["name"] = "srujana";
   student[student["roll_no"] = 15] = "roll_no";
   student["gender"] = "female";
   student[student["mob_no"] = 9873890414] = "mob_no";
})(student || (student = {}));
console.log(student.name);
console.log(student.roll_no);
console.log(student.gender);
console.log(student.mob_no);

輸出

以上程式碼將產生以下輸出：

srujana
15
female
9873890414

在本文中，使用者瞭解了 TypeScript 關鍵字“enum”。其特性和類別得到了很好的解釋，並且針對所討論的每種型別的列舉也共享了示例。