TypeScript中的Enum如何用

本篇內容介紹了“TypeScript中的Enum如何用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

Enum

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

在 Web 中比較常見的狀態判斷，是在處理請求時，要針對不同的響應狀態碼做對應的處理：

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

但因為響應狀態碼都是預先定義好的，所以沒什么爭議，代碼寫成這樣看也很正常，但是如果后端在服務器發生錯誤時自定義了一些編碼，并告訴前端，這些代碼都代表什么錯誤，那么上面的函數可能會變成這樣：

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 ，就可以避免上述發生的情況。

基本用法

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

enum requestStatusCodes {
  error,
  success,
}

不需要在內容與名稱之間加等號，直接在大括號內敘述該 Enum 中具有哪些變量，與其說是變量，不如說是常量更恰當些，因為在 Enum 中的值是不可修改的，所以也不必擔心這些定義好的規則會在代碼執行的過程中發生改變，導致執行錯誤。

而既然 Enum 是用來定義同一個系列常量的，那這些常量應該都能維護特定的值。沒錯，在 Enum 中的每個常量，都可以通過 = 來指定具體的值 。

但如果是像前面的 requestStatusCodes ，沒有為 error 或 success 指定具體的值也不會出錯，因為 TypeScript 會從 0 開始自動遞增定義值，所以簽名的 requestStatusCodes 會和下面的結果相同：

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

除了數字外，也可以定義為字串：

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

當然也可以在一個 enum 中設定不同的類型，但這樣一點意義都沒有：

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

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

首先用 Enum 定義兩者的狀態描述：

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!'));
  }
};

修改后的代碼就變得直觀多了，因為狀態碼都被放到了 Enum 中統一管理，所以就能用常量名來代表它們，之后不管過了多久，可以明確的知道這里再做什么，甚至連注解或文檔都不用寫了，因為代碼就是最好的文檔。

善用 Enum 能使代碼絕對是不可或缺的，但就算沒使用 TypeScript 也別灰心，因為 TypeScript 最終會被轉換為 JavaScript ，那來看看如何直接用 JavaScript 實現 Enum 吧！

用原生 JavaScript 實現 Enum

在前面說過 Enum 很像 Object ，如果研究一下 Enum 被編譯成 javascript 之后的代碼，就會發現還真的是 Object。

Enum 被編譯后會變成 Key 和 Value 反向對應的對象，這樣看起來非常簡單，為了方便使用，下面把它的編譯方式寫成一個函數：

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);

雖然得到的結果相同，但是喪失了 Enum 中最可貴的常量特色，如果不能讓它變成不可修改，那就有可能會在代碼里不經意地改動它，導致執行結果可能出錯，于是可以在最后利用 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 中實現 Enum 了。

const Enum 的用法

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

但是如果用 const 聲明 Enum ，編譯之后就不會產生 Object。

直接看例子，假設我把 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 中，會發現 Enum 并沒有產生 Object ，而是直接用 const 聲明在 Enum 中的值。

用 const 聲明 Enum 有幾個好處：

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

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

不過這樣也就沒法從 Enum 中反向取值了，因為它并不會產生對象：

const enum responseStatus {
  error = 400,
  success = 200,
}// 會出錯，因為已經沒有對象可供查找了
console.log(responseStatus[400])// 但這個不會有問題，因為編譯的時候會直接填值
console.log(responseStatus.error)// 編譯后：
// console.log(400)

“TypeScript中的Enum如何用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！