TypeScript中的Enum如何用-創(chuàng)新互聯(lián)

本篇內(nèi)容介紹了“TypeScript中的Enum如何用”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

目前創(chuàng)新互聯(lián)已為數(shù)千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、網(wǎng)站托管、服務(wù)器租用、企業(yè)網(wǎng)站設(shè)計(jì)、興文網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

Enum

Enum 是在 TypeScript 中新增的語法，也叫做枚舉，一般用它來管理多個(gè)相同系列的常量（即不能被修改的變量），用于狀態(tài)的判斷。

在 Web 中比較常見的狀態(tài)判斷，是在處理請求時(shí)，要針對(duì)不同的響應(yīng)狀態(tài)碼做對(duì)應(yīng)的處理：

const handleResponseStatus = (status: number): void => {
  switch (status) {
    case 200: // 請求成功時(shí)
      // Do something...
      break;
    case 400: // 請求失敗時(shí)
      // Do something...
      break;
    default:
      throw (new Error('No have status code!'));
  }
};

但因?yàn)轫憫?yīng)狀態(tài)碼都是預(yù)先定義好的，所以沒什么爭議，代碼寫成這樣看也很正常，但是如果后端在服務(wù)器發(fā)生錯(cuò)誤時(shí)自定義了一些編碼，并告訴前端，這些代碼都代表什么錯(cuò)誤，那么上面的函數(shù)可能會(huì)變成這樣：

const handleWrongStatus = (status: string): void => {
  switch (status) {
    case 'A':
      // Do something...
      break;
    case 'B':
      // Do something...
      break;
    case 'C':
      // Do something...
      break;
    default:
      throw (new Error('No have wrong code!'));
  }
};

如果是這種代碼，別說是剛接手的人，就算是你自己兩星期前寫的，恐怕不去翻文檔也想不起它們都代表什么了吧。

但是如果善用 Enum ，就可以避免上述發(fā)生的情況。

基本用法

先來看看 Enum 該怎么定義，它和 Object 的用法很像：

enum requestStatusCodes {
  error,
  success,
}

不需要在內(nèi)容與名稱之間加等號(hào)，直接在大括號(hào)內(nèi)敘述該 Enum 中具有哪些變量，與其說是變量，不如說是常量更恰當(dāng)些，因?yàn)樵?Enum 中的值是不可修改的，所以也不必?fù)?dān)心這些定義好的規(guī)則會(huì)在代碼執(zhí)行的過程中發(fā)生改變，導(dǎo)致執(zhí)行錯(cuò)誤。

而既然 Enum 是用來定義同一個(gè)系列常量的，那這些常量應(yīng)該都能維護(hù)特定的值。沒錯(cuò)，在 Enum 中的每個(gè)常量，都可以通過 = 來指定具體的值 。

但如果是像前面的 requestStatusCodes ，沒有為 error 或 success 指定具體的值也不會(huì)出錯(cuò)，因?yàn)?TypeScript 會(huì)從 0 開始自動(dòng)遞增定義值，所以簽名的 requestStatusCodes 會(huì)和下面的結(jié)果相同：

enum requestStatusCodes {
  error = 0,
  success = 1,
}console.log(requestStatusCodes.error) // 0
console.log(requestStatusCodes.success) // 1

除了數(shù)字外，也可以定義為字串：

enum requestWrongCodes {
  missingParameter = 'A',
  wrongParameter = 'B',
  invalidToken = 'C',
}console.log(requestWrongCodes.wrongParameter) // 'B'

當(dāng)然也可以在一個(gè) enum 中設(shè)定不同的類型，但這樣一點(diǎn)意義都沒有：

enum requestStatusCodes {
  error = 0,
  success = 'OK',
}

了解基本的 Enum 怎么定義后，接著就來改寫前面代碼中的 handleResponseStatus 和 handleWrongStatus ，讓它們在語義上能夠更明確。

首先用 Enum 定義兩者的狀態(tài)描述：

enum requestStatusCodes {
  error = 400,
  success = 200,
}

enum requestWrongCodes {
  missingParameter = 'A',
  wrongParameterType = 'B',
  invalidToken = 'C',
}

然后修改 handleResponseStatus 和 handleWrongStatus 中的 Switch 判斷：

const handleResponseStatus = (status: number): void => {
  switch (status) {
    case requestStatusCodes.success:
      // Do something...
      break;
    case requestStatusCodes.error:
      // Do something...
      break;
    default:
      throw (new Error('No have status code!'));
  }
};

const handleWrongStatus = (status: string): void => {
  // 如果覺得 requestWrongCodes.missingParameter 太長了，也可以用以下方式：
  const { missingParameter, wrongParameterType, invalidToken, } = requestWrongCodes;
  switch (status) {
    case missingParameter:
      // Do something...
      break;
    case wrongParameterType:
      // Do something...
      break;
    case invalidToken:
      // Do something...
      break;
    default:
      throw (new Error('No have wrong code!'));
  }
};

修改后的代碼就變得直觀多了，因?yàn)闋顟B(tài)碼都被放到了 Enum 中統(tǒng)一管理，所以就能用常量名來代表它們，之后不管過了多久，可以明確的知道這里再做什么，甚至連注解或文檔都不用寫了，因?yàn)榇a就是最好的文檔。

善用 Enum 能使代碼絕對(duì)是不可或缺的，但就算沒使用 TypeScript 也別灰心，因?yàn)?TypeScript 最終會(huì)被轉(zhuǎn)換為 JavaScript ，那來看看如何直接用 JavaScript 實(shí)現(xiàn) Enum 吧！

用原生 JavaScript 實(shí)現(xiàn) Enum

在前面說過 Enum 很像 Object ，如果研究一下 Enum 被編譯成 javascript 之后的代碼，就會(huì)發(fā)現(xiàn)還真的是 Object。

Enum 被編譯后會(huì)變成 Key 和 Value 反向?qū)?yīng)的對(duì)象，這樣看起來非常簡單，為了方便使用，下面把它的編譯方式寫成一個(gè)函數(shù)：

const newEnum = (descriptions) => {
  const result = {};
  Object.keys(descriptions).forEach((description) => {
    result[result[description] = descriptions[description]] = description;
  });
  return result;
};

const responseStatus = newEnum({
  error: 400,
  success: 200,
});

// { '200': 'success', '400': 'error', error: 400, success: 200 }
console.log(responseStatus);

雖然得到的結(jié)果相同，但是喪失了 Enum 中最可貴的常量特色，如果不能讓它變成不可修改，那就有可能會(huì)在代碼里不經(jīng)意地改動(dòng)它，導(dǎo)致執(zhí)行結(jié)果可能出錯(cuò)，于是可以在最后利用 Object.freeze() ，讓外部操作無法新增、刪除或重新定義任何 Property ：

const newEnum = (descriptions) => {
  const result = {};
  Object.keys(descriptions).forEach((description) => {
    result[result[description] = descriptions[description]] = description;
  });
  return Object.freeze(result);
};

const responseStatus = newEnum({
  error: 400,
  success: 200,
});

// 即使不小心修改了
responseStatus['200'] = 'aaaaaaaa';

// 仍然是 { '200': 'success', '400': 'error', error: 400, success: 200 }
console.log(responseStatus);

這樣就能簡單在 JavaScript 中實(shí)現(xiàn) Enum 了。

const Enum 的用法

從前面的 JavaScript 代碼中可以看到 Enum 編譯過后會(huì)變成 Key 和 Value 互相對(duì)應(yīng)的 Object ，也就是說不管是用 Key 還是Value 都可以取出對(duì)應(yīng)的值，

但是如果用 const 聲明 Enum ，編譯之后就不會(huì)產(chǎn)生 Object。

直接看例子，假設(shè)我把 responseState 用 const 重新生命，且也是以 handleResponseStatus 使用該 Enum 做判斷：

enum responseStatus {
  error = 400,
  success = 200,
}

const handleResponseStatus = (status: number): void => {
  switch (status) {
    case responseStatus.success:
      console.log('請求成功！');
      break;
    case responseStatus.error:
      console.log('請求失敗！');
      break;
    default:
      throw (new Error('No have status code!'));
  }
};

看起來一切正常，不過在編譯后的 JavaScript 中，會(huì)發(fā)現(xiàn) Enum 并沒有產(chǎn)生 Object ，而是直接用 const 聲明在 Enum 中的值。

用 const 聲明 Enum 有幾個(gè)好處：

  • 假設(shè)要用到的 Enum 非常多，那在執(zhí)行時(shí)就會(huì)不停地使用 IIFE 產(chǎn)生 Object 將 Key 和 Value 綁定到 Object，會(huì)造成一些效率上的損失，也會(huì)增加內(nèi)存，但是 const 并不會(huì)產(chǎn)生 Object ，也就不會(huì)有以上的問題。

  • 就算到的 Enum 不多，判斷時(shí)也需要一直從 Object 中找出對(duì)應(yīng)的值，而如果是用 const 聲明 Enum ，在編譯成 JS 時(shí)就將聲明的值直接放入判斷中。

不過這樣也就沒法從 Enum 中反向取值了，因?yàn)樗⒉粫?huì)產(chǎn)生對(duì)象：

const enum responseStatus {
  error = 400,
  success = 200,
}// 會(huì)出錯(cuò)，因?yàn)橐呀?jīng)沒有對(duì)象可供查找了
console.log(responseStatus[400])// 但這個(gè)不會(huì)有問題，因?yàn)榫幾g的時(shí)候會(huì)直接填值
console.log(responseStatus.error)// 編譯后：
// console.log(400)

“TypeScript中的Enum如何用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

網(wǎng)站欄目：TypeScript中的Enum如何用-創(chuàng)新互聯(lián)
本文來源：http://muchs.cn/article32/ddddpc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、自適應(yīng)網(wǎng)站、網(wǎng)站收錄、微信小程序、服務(wù)器托管、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

商城網(wǎng)站建設(shè)