2024-07-16|閱讀時間 ‧ 約 4 分鐘

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

鱈魚的魚缸搬家了!新家文章皆有重新修訂,歡迎來新家看看喔。(´▽`ʃ♡ƪ)
raw-image


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


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


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

// 可以用各種方式取用列舉

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 是甚麼鬼?ლ(・´ェ`・ლ)」

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

範例程式碼


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

分享至
成為作者繼續創作的動力吧!
© 2024 vocus All rights reserved.