TypeScript 中列舉型別的理解？應用場景？

喆星高照發表於2021-09-03
TypeScript型別

 

 

一、是什麼

列舉是一個被命名的整型常數的集合，用於宣告一組命名的常數,當一個變數有幾種可能的取值時,可以將它定義為列舉型別

通俗來說，列舉就是一個物件的所有可能取值的集合

在日常生活中也很常見，例如表示星期的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

相關文章