iT邦幫忙

2023 iThome 鐵人賽

DAY 7
0
Modern Web

TypeScript 魔法 - 喚醒你的程式碼靈感系列 第 7

Day07 - 定義常數集合的好幫手 - 枚舉(Enums)

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20230922/20152047OyjR0brYCS.png

昨日與大家分享元組(Tuples),今日主題是 TypeScript 中另一個獨有的型別 - 枚舉(Enums)。

枚舉(Enums)應用於定義一組命名的常數。與 JavaScript 中的物件不同,枚舉提供更強的型別安全性,
這個由 TypeScript 新增的型別允許建立一個枚舉列表,儘管這些標籤最終會被轉換為從 0 開始的數字

數字枚舉

讓我們透過一個身份驗證的範例演示枚舉的應用:

JavaScript 為例:
在 JavaScript 中定義全域常數是一種常見的做法。透過定義常數,可以在程式碼的任何地方使用,這是 JavaScript 中一個常見的模式。

const ADMIN = 0;
const USER = 1;

const person = {
  role: ADMIN,
};

if (person.role === ADMIN) {
  console.log('is admin'); // is admin
}

缺點是,現在 role 被推斷為一種數字型別,可以儲存任何數字,甚至是我們沒有定義過的數字。
https://ithelp.ithome.com.tw/upload/images/20230922/20152047t2ZrQgA3wK.png
此外,我們必須單獨定義常數,而使用枚舉可以改善並提高工作效率。

TypeScript 為例:
我們使用 enum 關鍵字建立一個枚舉,命名規範是以寫字母開頭,這個規範有助於與普通變數或函式區分開來。雖然不是強制性的規範,但強烈建議遵循,有助於提高程式碼可讀性和可維護性。

在默認的情況下,ADMIN 的數字的值為 0、USER 數字的值為 1,所有枚舉成員會自動遞增。

enum Role {
  ADMIN,
  USER,
}

const person = {
  role: Role.ADMIN,
};

if (person.role === Role.ADMIN) {
  console.log('is admin'); // is admin 
}

https://ithelp.ithome.com.tw/upload/images/20230922/20152047FF9qiUZuzX.png
https://ithelp.ithome.com.tw/upload/images/20230922/20152047gfySzylJNv.png

我們來看一下編譯後 JavaScript 的程式碼:

首先,這是一個立即函式,這裡的 Role 為一個物件進行管理,包含 ADMIN 屬性和 USER 屬性。
能夠看到上述提到 ADMIN 屬性與 USER 屬性的值,儘管有些複雜,但這正是 TypeScript 中的枚舉編譯到 JavaScript 後的結構。

var Role;
(function (Role) {
    Role[Role['ADMIN'] = 0] = 'ADMIN';
    Role[Role['USER'] = 1] = 'USER';
})(Role || (Role = {}));

var person = {
    role: Role.ADMIN,
};

if (person.role === Role.ADMIN) {
    console.log('is admin');
}

自定義數字枚舉

假設某種原因,我不想將 0 作為起始數字,可以在枚舉成員後面新增等號並賦予值。
這時 ADMIN 的數字的值為 5、USER 數字的值為 6,起始數字就不再是從 0 開始遞增。

enum Role {
  ADMIN = 5,
  USER,
}

https://ithelp.ithome.com.tw/upload/images/20230922/201520474tnqiirzgJ.png
https://ithelp.ithome.com.tw/upload/images/20230922/20152047Eursc3AD0W.png

字串枚舉

與數字枚舉類似,字串枚舉中的每個成員都必須使用字串文字或另一個字串枚舉成員進行常數的初始化。
雖然字串枚舉沒有自動遞增行為,但它的優點在於可以很好的序列化。換句話說,字串枚舉的值更具有意義,也容易閱讀及理解。

enum Role {
  ADMIN = 'ADMIN',
  USER = 'USER',
}

本日重點

  1. 透過關鍵字 enum 定義,命名以字母寫開頭。
  2. 枚舉成員如果沒有指定值,會自動分配默認值,從 0 開始自動遞增。
  3. 字串枚舉沒有自動遞增,但是枚舉的值更具可讀性和可維護性。

參考


上一篇
Day06 - 資料表示:我被固定了!- 元組(Tuples)
下一篇
Day08 - 方便又危險的型別 - 任何(any)
系列文
TypeScript 魔法 - 喚醒你的程式碼靈感30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

我要留言

立即登入留言