TypeScript中枚舉類型的理解與應用場景

Posted on by

一、是什麼

枚舉是一個被命名的整型常數的集合，用於聲明一組命名的常數,當一個變量有幾種可能的取值時,可以將它定義為枚舉類型

通俗來說，枚舉就是一個對象的所有可能取值的集合

在日常生活中也很常見，例如表示星期的SUNDAY、MONDAY、TUESDAY、WEDNESDAY、THURSDAY、FRIDAY、SATURDAY就可以看成是一個枚舉

枚舉的說明與結構和聯合相似，其形式為：

enum 枚舉名{
    標識符①[=整型常數],
    標識符②[=整型常數],
    …
    標識符N[=整型常數],
}枚舉變量;

二、使用

枚舉的使用是通過enum關鍵字進行定義，形式如下：

enum xxx { … }

聲明關鍵字為枚舉類型的方式如下：

// 聲明d為枚舉類型Direction
let d: Direction;

類型可以分成：

  • 數字枚舉
  • 字符串枚舉
  • 異構枚舉

數字枚舉

當我們聲明一個枚舉類型是,雖然沒有給它們賦值,但是它們的值其實是默認的數字類型,而且默認從0開始依次累加:

enum Direction {
    Up,   // 值默認為 0
    Down, // 值默認為 1
    Left, // 值默認為 2
    Right // 值默認為 3
}

console.log(Direction.Up === 0); // true
console.log(Direction.Down === 1); // true
console.log(Direction.Left === 2); // true
console.log(Direction.Right === 3); // true

如果我們將第一個值進行賦值後，後面的值也會根據前一個值進行累加1：

enum Direction {
    Up = 10,
    Down,
    Left,
    Right
}

console.log(Direction.Up, Direction.Down, Direction.Left, Direction.Right); // 10 11 12 13

字符串枚舉

枚舉類型的值其實也可以是字符串類型：

enum Direction {
    Up = 'Up',
    Down = 'Down',
    Left = 'Left',
    Right = 'Right'
}

console.log(Direction['Right'], Direction.Up); // Right Up

如果設定瞭一個變量為字符串之後，後續的字段也需要賦值字符串，否則報錯：

enum Direction {
 Up = 'UP',
 Down, // error TS1061: Enum member must have initializer
 Left, // error TS1061: Enum member must have initializer
 Right // error TS1061: Enum member must have initializer
}

異構枚舉

即將數字枚舉和字符串枚舉結合起來混合起來使用，如下：

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

通常情況下我們很少會使用異構枚舉

本質

現在一個枚舉的案例如下：

enum Direction {
    Up,
    Down,
    Left,
    Right
}

通過編譯後，javascript如下：

var Direction;
(function (Direction) {
    Direction[Direction["Up"] = 0] = "Up";
    Direction[Direction["Down"] = 1] = "Down";
    Direction[Direction["Left"] = 2] = "Left";
    Direction[Direction["Right"] = 3] = "Right";
})(Direction || (Direction = {}));

上述代碼可以看到， Direction[Direction[“Up”] = 0] = “Up”可以分成

  • Direction[“Up”] = 0
  • Direction[0] = “Up”

所以定義枚舉類型後，可以通過正反映射拿到對應的值，如下：

enum Direction {
    Up,
    Down,
    Left,
    Right
}

console.log(Direction.Up === 0); // true
console.log(Direction[0]); // Up

並且多處定義的枚舉是可以進行合並操作，如下：

enum Direction {
    Up = 'Up',
    Down = 'Down',
    Left = 'Left',
    Right = 'Right'
}

enum Direction {
    Center = 1
}

編譯後，js代碼如下：

var Direction;
(function (Direction) {
    Direction["Up"] = "Up";
    Direction["Down"] = "Down";
    Direction["Left"] = "Left";
    Direction["Right"] = "Right";
})(Direction || (Direction = {}));
(function (Direction) {
    Direction[Direction["Center"] = 1] = "Center";
})(Direction || (Direction = {}));

可以看到，Direction對象屬性回疊加

三、應用場景

就拿回生活的例子，後端返回的字段使用 0 – 6 標記對應的日期，這時候就可以使用枚舉可提高代碼可讀性，如下：

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

包括後端日常返回0、1 等等狀態的時候，我們都可以通過枚舉去定義，這樣可以提高代碼的可讀性，便於後續的維護

參考文獻

https://zh.wikipedia.org/wiki/%E6%9E%9A%E4%B8%BE

總結

到此這篇關於TypeScript中枚舉類型的理解與應用場景的文章就介紹到這瞭,更多相關TypeScript枚舉類型內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：