如何分析TypeScript枚舉類型

這篇文章給大家介紹如何分析TypeScript枚舉類型，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

1.概述

所謂的枚舉類型就是為一組數(shù)值賦予名字。

enum類型在C++、Java語言中比較常見，TypeScript在JavaScript原有的類型基礎(chǔ)上也增加了enum類型。

比如我們需要定義一組角色，需要使用數(shù)字表示，就可以使用如下代碼定位：

enum role{
    STUDENT,
    TEACHER,
    ADMIN
}

上面代碼中我們定義了role為一個(gè)枚舉類型，這個(gè)里面有是三個(gè)值，TypeScript會(huì)為每個(gè)值自動(dòng)的分配序號(hào)，默認(rèn)從0開始依次排列，它們的值依次為0 1 2。

當(dāng)然我們也可以自定義每個(gè)值，如果非全部定義則后面的值會(huì)根據(jù)前面的值自增。

示例代碼如下：

enum role1 {
    student = 1,
    // 后面兩個(gè)值依次為2 3
    teacher,
    admin,
}
enum role2 {
    // 每個(gè)名具有指定的值
    student = 1,
    teacher = 3,
    admin = 6,
}

2.數(shù)字枚舉

我們上面介紹的例子就是數(shù)字枚舉類型，但是還有一個(gè)注意點(diǎn)就是如果某個(gè)字段使用了常量或者計(jì)算后的值 ，我們就必須設(shè)置緊跟著字段的初始值 ，否則將會(huì)拋出異常。

示例代碼如下：

;(function () {
  // 定義一個(gè)函數(shù)
  const getValue: () => number = (): number => {
    return 0
  }

  enum role1 {
    student = getValue(),
    // teacher, // error 枚舉成員必須具有初始化表達(dá)式。
    // admin, // error 枚舉成員必須具有初始化表達(dá)式。
  }
  const TEACHER_ROLE: number = 3
  // 每個(gè)名具有指定的值
  enum role2 {
    student,
    teacher = TEACHER_ROLE,
    // admin, // error 枚舉成員必須具有初始化表達(dá)式。
  }
})()

2.1反向映射

所謂的反向映射就是可以通過key訪問到value，通過value訪問到key。

我們可以通過.名稱或者['名稱']的方式取到每個(gè)具體的值，也可以通過[數(shù)值]的方式取到每個(gè)數(shù)值對(duì)應(yīng)的名稱，

示例代碼如下：

enum role {
    student,
    teacher,
    admin,
}
console.log(role.admin) // 2
console.log(role['teacher']) //1
console.log(role[0]) //‘student'

其實(shí)TypeScript中的枚舉類型編譯成JavaScript代碼之后就是一個(gè)對(duì)象，我們將上面那個(gè)枚舉類型編譯一下，

編譯后的代碼如下：

"use strict";
var role;
(function (role) {
    role[role["student"] = 0] = "student";
    role[role["teacher"] = 1] = "teacher";
    role[role["admin"] = 2] = "admin";
})(role || (role = {}));

這樣看我們可能好理解，其實(shí)就是通過一個(gè)自調(diào)函數(shù)將值賦值給role對(duì)象，賦值之后如下：

var role = {
    "student": 0,
    "teacher": 1,
    "admin"  : 2, 
    0: "student", 
    1: "teacher", 
    2: "admin", 
}

值得注意的是 反向映射僅僅支持在數(shù)字枚舉 中，不支持在2.4版本中新增的字符串枚舉 中。

3.字符串枚舉

所謂的字符串枚舉就是枚舉中的每個(gè)字段的值必須都是字符串，或者是枚舉中的其他字段，

示例代碼如下：

enum Person {
  name = '一碗周',
  hobby = 'coding',
  // 設(shè)置枚舉中的字段作為值
  myName = name,
}
console.log(Person.name, Person.myName) // 一碗周 一碗周

4.const枚舉

在我們定義了普通枚舉之后，被編譯成JavaScript代碼之后會(huì)創(chuàng)建一個(gè)對(duì)應(yīng)的對(duì)象，如果使用枚舉是增了增加程序的可讀性，且并不需要編譯之后的對(duì)象。在TypeScript1.4中增加了const枚舉。

const枚舉被翻譯為完全嵌入枚舉 ，所謂的完全嵌入枚舉就是編譯之后沒有對(duì)應(yīng)的對(duì)象，只是從枚舉中拿到對(duì)應(yīng)你的值然后進(jìn)行替換。定義const枚舉只需要在普通枚舉前面加上const關(guān)鍵字。

示例代碼如下：

const enum role {
    student,
    teacher,
    admin,
}
let admin = role.admin

如上代碼會(huì)被編譯為如下：

let admin = 2 /* admin */;

關(guān)于如何分析TypeScript枚舉類型就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。