TypeScript 之 DX 體驗更好的列舉資料定義方式

better-enumeration-definition-for-improved-dx

一般在使用 TypeScript 的時候，大家都有遇過定義列舉資料的情境吧。

不過不管是 enum 和 literal 的方式其實都有些小缺點，以下推薦一個個人認為體驗更好的方式。

defineConstants

舉個栗子。( ´ ▽ ` )ﾉ🌰

// 可以用各種方式取用列舉
export const {
  FISH_TYPE_KV,
  FISH_TYPE_MAP_BY_KEY,
  FISH_TYPE_MAP_BY_VALUE,
  FISH_TYPE_KEYS,
  FISH_TYPE_VALUES,
} = defineConstants(
  [
    {
      key: 'COD',
      value: 'cod',
      // 除了 key value 外，還可以額外包含其他資訊
      label: '鱈魚',
    },
    {
      key: 'OCTOPUS',
      value: 'octopus',
      label: '章魚',
    },
  ] as const,
  'FISH_TYPE'
)

FISH_TYPE_KV.OCTOPUS;      // octopus
FISH_TYPE_MAP_BY_KEY.COD   // { key: 'COD', value: 'cod', label: '鱈魚' },
FISH_TYPE_MAP_BY_VALUE.cod // { key: 'COD', value: 'cod', label: '鱈魚' },
FISH_TYPE_KEYS[0]          // COD
FISH_TYPE_VALUES[1]        // octopus

// value 使用數字也是沒問題
export const {
  TYPE_VK,
  TYPE_MAP_BY_VALUE,
} = defineConstants(
  [
    {
      key: 'COD',
      value: 0,
    },
    {
      key: 'OCTOPUS',
      value: 1,
    },
  ] as const,
  'TYPE'
)

TYPE_VK[0]            // COD
TYPE_MAP_BY_VALUE[1]  // { key: 'OCTOPUS', value: 1 }

唯一的缺點是 value 如果使用數字要自己訂，不會像 enum 一樣自己遞增。(›´ω`‹ )


鱈魚：「看起來是不是很不錯啊。(´,,•ω•,,)」

路人：「所以我說那個 defineConstants 是甚麼鬼？ლ(・´ｪ`・ლ)」

鱈魚：「別急別急，去找吧，都放在下面的連結了。◝( •ω• )◟」


範例程式碼

至於這個酷東西怎麼來的？是我有一天路過某篇文章看到的方法，原諒我找不到原始文章了，如果知道的讀者們還請幫忙補充補充。(´,,•ω•,,)

總結 🐟

  • 這更方便的取用列舉資料，彌補 enum 和 literal 的缺點
  • 除了 key value 外，還可以從不同的角度取用資料
目錄