快捷導(dǎo)航

TypeScript中枚舉類型的理解與應(yīng)用場景

更新時間：2021年09月03日 11:27:26 作者：喆星高照

如 TypeScript 官方文檔所說，枚舉類型是對 JavaScript 標(biāo)準(zhǔn)數(shù)據(jù)類型集的擴充,所以下面這篇文章主要給大家介紹了關(guān)于TypeScript中枚舉類型的理解與應(yīng)用場景的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、是什么

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

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

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

枚舉的說明與結(jié)構(gòu)和聯(lián)合相似，其形式為：

enum 枚舉名{
    標(biāo)識符①[=整型常數(shù)],
    標(biāo)識符②[=整型常數(shù)],
    ...
    標(biāo)識符N[=整型常數(shù)],
}枚舉變量;

二、使用

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

enum xxx { ... }

聲明關(guān)鍵字為枚舉類型的方式如下：

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

類型可以分成：

數(shù)字枚舉
字符串枚舉
異構(gòu)枚舉

數(shù)字枚舉

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

enum Direction {
    Up,   // 值默認(rèn)為 0
    Down, // 值默認(rèn)為 1
    Left, // 值默認(rèn)為 2
    Right // 值默認(rèn)為 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

如果我們將第一個值進行賦值后，后面的值也會根據(jù)前一個值進行累加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

如果設(shè)定了一個變量為字符串之后，后續(xù)的字段也需要賦值字符串，否則報錯：

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
}

異構(gòu)枚舉

即將數(shù)字枚舉和字符串枚舉結(jié)合起來混合起來使用，如下：

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

通常情況下我們很少會使用異構(gòu)枚舉

本質(zhì)

現(xiàn)在一個枚舉的案例如下：

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"

所以定義枚舉類型后，可以通過正反映射拿到對應(yīng)的值，如下：

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對象屬性回疊加

三、應(yīng)用場景

就拿回生活的例子，后端返回的字段使用 0 - 6 標(biāo)記對應(yīng)的日期，這時候就可以使用枚舉可提高代碼可讀性，如下：

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 等等狀態(tài)的時候，我們都可以通過枚舉去定義，這樣可以提高代碼的可讀性，便于后續(xù)的維護

參考文獻

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