---
url: /blog-program/better-enumeration-definition-for-improved-dx.md
description: 不管是 enum 和 literal 的方式其實都有些小缺點，以下推薦一個個人認為體驗更好的方式
---

![better-enumeration-definition-for-improved-dx](/better-enumeration-definition-for-improved-dx.webp){.cover}

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

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

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

## defineConstants

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

```ts
// 可以用各種方式取用列舉
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 是甚麼鬼？ლ(・´ｪ\`・ლ)」

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

[範例程式碼](https://www.typescriptlang.org/play/?#code/JYOwLgpgTgZghgYwgAgJICE4GcIBEIzIDeAUMsgNYQCeAXMgApQD2ADtGNQNI0DcZyAG5wANgFcI9LGCigA5sgA+yEGIC2AI2j8AviRKd2yACrMmbDtSYFgADwA8AOWQRbkEABMsyabJAKAXmQAcmCAPmQg51d3LxDg5AB+eOR6AAMAEiJHHQB9NP4DaiNTc3YoTnsBMssXNwhPb195ABoBaPrGnxl5SPi2iKDMolKWcs5rGDsnMJ0smorqHQL9QxRTHmose2NBkzrY7ygIOA9mEBFqZABtUBhoZABBFuQAOne7h-QAXQFkx4ODTipHI5GOp3Ol0oNHonygyC4-HIenIyXQ12CIgacjAAAtgt9AV0AAx-G5cX7kejXLgvd6vDY0bboMKU1IqCCCaACanfQprEzMABqogk212fWMRLi4LOFyutxA93hzzeHyVXzZ-2l3hBoNlkKuwnEkmQcIRSOQKKSyHRmOxeIJOuQpNR5LZ1NpaoZwtFEGZrJ5HK5UCD1z5q2K62YAGV5FjNgBZOCsHZ7KUxIG6gQG+XQuhmjXwxEka3JLjOhacTZkvVgk5yqE0miFhHfejGS3W+ggTncqnB7T6VysZgVZACxPQOQQVDgaA4BBgYDneyPPYAzNdc3GWvklugfPMQjGdsmZvUQndwdQflRwVJlNpyXO3NN82q+nmn5ku1Y-yOoSW5xK6NqmHG-gJjQyapuuQZTlAM5zpAUCLsuq7gfGECPrBEQAGQPtBT4smEYYRkUJSxlhIomjBz5BBmnTAjmDaGkIfqwkWFqlmSFbAd4VbcDQtYCPWEJ5herYUh2XZBr2IZyX2t6RpRNESHREoMa+rESR+dLqsqtparaGL-ji+JAUx3igckmGQRAakQHRcEDghSHzqhEBLiuIA7FR9mOc5+GCoFxFhKRA7hnelEQXIUHUI59H7PxxAseJUJUAW5olmJjZGhxhaGUKui8ZWYyWDWbp1sgb4KpsUlnsVAjXvJ-bsq1ykUdGmyJZpyVWTVOnvlxn4GZqv6mQ6FnOjZgqxfFiUueybmzh5aE+X583YTQi3BYyCV+vYJFkdF0ZbY5mxJYxhypblbGZZxhk5YN6X5Saj0PE1ZbIEKZUWIslU2tVtX7lch5Cmez0tUpikhqdIV+pdfXXVmL15Tcenet+xl-lNTopbNdlxQ5iM0GuEXLdOq0oetGH+cTF1k+uyAEaYjPUEd4UnfoAD0ABUfPIIAFK6AD2mgBfeoA05aAOhKgCQQYA5oqAJ3aZCC8rCK-YA9Gb5uxJrIIAIW6APCGgC4BoAQAyq6rgBZ2oAlf6AJfugDGaYA4zGAJmmgAYUYA6fqAAVKgBQcsg2DIAg5zSGbyCCwAAq4cBqKwWKq2ksdrFgCCyKwYCqzzPPIIA0gmAIAJgCdpoA8PqABx6gAeplbqsjmOYB+wHlcgoL5C4AAogAMqgQoNwASgAmrkiYN8YAASADyuC5FwQptMHoKNy3bddz3fdDyPQq0qr9fN63Hfd73A-Dz3jwMLk6Dd1wDedxPdfINPG9z9vi97wfR+5EKjxNwAqg359T+vs9bwvu-P2-BuMZVY6D6B4GwvYADC1c4DgCwAAClXjcJB5Ba6gnQQ9EIQ9e7BE-ug8gxoJD0GCLiZgagIC4JQaCEQcAtAiGIYAUO1ACyiZQye6CdB4NBGg-B+ZiExmbgAMVyAwVAkCuCvwYKwi+6DCGmmCDgEQMAAC0rBgAIAoGIVgUieHIBoXQ4hgArwMAGvK2j2GcMJL7f2IBpCcOCFfH+88d64GCKrAAlKndO2d85l1sKOccAp8AiGACGagU48TMA8H0NYx5L7f03o4u+AD34xmuKoTQ0AIyT1jmkZWPMSDl3HDAMQIBvLnGQOAqYUCYFwKqOQFGXQQYYGwHgAg4YJ7IA6DdZo-g+ihAGPAipWAOwvBABHf0rBEAQESPQRwrjbpV2sZXVgxwpi2D6KM8hWAJlIBtMMDZ4zJl5DSOyUIlpjhgDEFAEA8zyDXGGMsmwtgdAn07jGNIZ5BmvDUCmeB8DgCQDUHMgIER-kQDUK8TKrj2m3PuSsuwOgklAPefQT53zWC-NBYCyIIKAWvFkVC0SNxYWPOeUKZF5SCBYFeMcDwYgkCIJ4fAtFLxMVAoiPA6q6D6TMsJeg24uLMpnkxXiv00LQQ6AJTwogHDCWStBHcrIDzVkIq4OSz5NK6UQAZfgplKYWUArZcgDlvLQTcr1Sa25wrZFCoFTQMVyI5XoOlWKx1RLFVwqeYmfeh9j6nzVZS6lEBaX0pNbq1g+qwWGuNTo70PKY38rBRCmgNqwX2qtK61BMr0GuoVUQJV8KvUP27oi-1MAqUapDYy5lZoDXYqNZy017w406ITeC61sIAVpolWm51sqxW5vzU8l599S3lqDZq7V6Cw0RqxcC+tFrY3mvjcKwVHbU0mu7Sa3t2b+3EuVYW0dgbg1atDdW1ldbo06LNeGhdrak2XjXW20VG6M3ECzaCHNe74UtxjMYUd7TQG+xWshBcXl0K+UJQ2ySh5Rj-UqMEMeuCOmsg7MwHqh1diWmRCzG58r6owbMOVRY9hgjLyQ44FDCMTRIzCFhq0OGoP4eubB8YHMEOnxjORyj+1xS0cJaAgijGDzMcI3BtjiLOMvAo2eNmfpeN0YE7h25THBSCRI4Wn1o9T5cZk2hoiqZMP8YYya6DIm1PBA04-RFOnUOhQM3x9hxmeGmdU0R+DhabOEQOiaNMCmnP4JcyxywJGf3GE852fjAg+N6BIGnZAgB75UAKdyQtAAgKoAOi985GKFrLfJviK4LOkPMgRqAYz91yMYTuDAG6j3HgIYrpXyuVeq5Z31Z86slbKxVqr99NOIvafVzrTWtOvP6x1xr3WJNtFAUECpoAIDQMWbAsACCBDXEgyazBwRIHD1Yfg2RxD-YeF2+guLgATNMAGFyWtZHIEAGiagAYf8ACEJSXACyGTdwAoMqAGoVQAboqADW5e2gAoKJNXoiA9CQiAAkcwAWtnHatGKhtm3B6QOMIPBgr9JMmv2yEZgS42BiCwND8gwPQfBEAAdeUOxXvosd4KxNiBDBAG+NhuLj3EkHp116rY9XgI6RyjmMvAeFxax2AHHWAWdjbZz1x+LzXjbdwKCOLRBeEhBl0hjHwRDtIcJ8QyHCQZWs6Gy1p+L936vEO8geXiuts7ZeKr9XLxNfg6hzD0XDXxcvJScSQkMazfpxl87wbE2jdAOuAARk9-z9Ogvhe83TtdwA-vJCyLoAdW1AD6curQASTaAHlVQAMhm5b8ZXanNcBDi+Xu08XBu+uljARA+b1TlvarW06jbMIldW-RwVYk5PYdN4LMELnyPUf4+1kQ5AwfO8CEpwVsA7Tghs6Z-oYvXBrge693Ln3w8SBl+9VZwPIfPfm-h4j-vkmh+mmD1aIAA)

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

## 總結 🐟

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