Enum 的用法

Enum 是什麼？

TypeScirpt 的 Enum 讓程式碼更容易閱讀和維護，因為可以使用有意義的名稱來代表數值，而不是直接使用數字或字串

基本語法

enum Direction {
  Up,
  Down,
  Left,
  Right
}

預設情況下，Enum 的值會從 0 開始自動遞增：

• Direction.Up = 0
• Direction.Down = 1
• Direction.Left = 2
• Direction.Right = 3

自訂數值

你也可以手動指定數值：

enum Status {
  Pending = 0,
  Approved = 1,
  Rejected = 2
}

提示

如果只指令第一筆資料的數值，後面筆數會自動累加

字串 Enum

Enum 也可以使用字串值：

enum UserRole {
  Admin = "ADMIN",
  User = "USER",
  Guest = "GUEST"
}

實務開發上的用途

1. 狀態管理

enum OrderStatus {
  Pending = "pending",
  Processing = "processing",
  Shipped = "shipped",
  Delivered = "delivered",
  Cancelled = "cancelled"
}

function updateOrderStatus(orderId: string, status: OrderStatus) {
  // 更新訂單狀態
}

2. API 回應碼

enum ResponseCode {
  Success = 200,
  BadRequest = 400,
  Unauthorized = 401,
  NotFound = 404,
  ServerError = 500
}

function handleResponse(code: ResponseCode) {
  switch (code) {
    case ResponseCode.Success:
      console.log("操作成功");
      break;
    case ResponseCode.NotFound:
      console.log("找不到資源");
      break;
    // ...
  }
}

3. 配置選項

enum Theme {
  Light = "light",
  Dark = "dark",
  Auto = "auto"
}

function setTheme(theme: Theme) {
  document.documentElement.setAttribute("data-theme", theme);
}

4. 常數集合

enum HttpMethod {
  GET = "GET",
  POST = "POST",
  PUT = "PUT",
  DELETE = "DELETE"
}

async function fetchData(url: string, method: HttpMethod) {
  return fetch(url, { method });
}

注意事項

1. Enum 的反向映射：數字 Enum 會自動建立反向映射（從值到名稱），但字串 Enum 不會

enum NumberEnum {
  A = 0
}
console.log(NumberEnum[0]); // "A"

enum StringEnum {
  A = "a"
}
console.log(StringEnum["a"]); // undefined

2. 編譯後的程式碼：Enum 會編譯成 JavaScript 物件，增加程式碼大小。可以改使用 const enum 或 as const 來解決

3. 許多人偏好使用 as const 物件來取代 Enum：

const Direction = {
  Up: "up",
  Down: "down",
  Left: "left",
  Right: "right"
} as const;

type Direction = typeof Direction[keyof typeof Direction];

練習做做看

function getTodaySpecial(day = "") {
  switch (day) {
    case "Monday":
      return "星期一大特價: 買一送一!";
    case "Tuesday":
      return "星期二大特價: 三人同行一人免費!";
    case "Wednesday":
      return "星期三大特價: 五折優惠!";
    case "Thursday":
      return "星期四大特價: 三人同行一人免費!";
    case "Friday":
      return "星期五大特價: 五折優惠!";
    case "Saturday":
      return "星期六大特價: 買一送一!";
    case "Sunday":
      return "星期日大特價: 三人同行一人免費!";
    default:
      return "今天沒有特價活動!";
  }
}

console.log(getTodaySpecial());

點擊查看解答

enum weekDay {
  Monday,
  Tuesday,
  Wednesday,
  Thursday,
  Friday,
  Saturday,
  Sunday,
}

function getTodaySpecial(day: weekDay) {
  switch (day) {
    case weekDay.Monday:
      return "星期一大特價: 買一送一!";
    case weekDay.Thursday:
      return "星期二大特價: 三人同行一人免費!";
    case weekDay.Wednesday:
      return "星期三大特價: 五折優惠!";
    case weekDay.Tuesday:
      return "星期四大特價: 三人同行一人免費!";
    case weekDay.Friday:
      return "星期五大特價: 五折優惠!";
    case weekDay.Saturday:
      return "星期六大特價: 買一送一!";
    case weekDay.Sunday:
      return "星期日大特價: 三人同行一人免費!";
    default:
      return "今天沒有特價活動!";
  }
}

console.log(getTodaySpecial(weekDay["Monday"]));