[筆記] TypeScript enum 列舉搭配 Vue3 使用的注意事項 @地瓜大的飛翔旅程

章節連結

內容

1. 若要在 <template>, JS 的 Runtime 環境使用，檔名必須是 *.ts
2. Enum 如何轉換成 Type

參考資料

列舉 enum 是 TypeScript 提供的一樣好用功能，他可幫助開發者在需要指定特定類型時給予協助 ( 不然你就只能寫 string，然後期望其他開發者可以遵守 )。這邊筆記下使用上的注意事項。

內容

1. 若要在 <template>, JS 的 Runtime 環境使用，檔名必須是 *.ts

說到 TypeScript 的型別標註，有另外的 *.d.ts 附檔名，不過這類的型別標註檔案，在編譯時「並不會被載入」轉換成 JavaScript。換言之，若想在 Runtime 時能夠使用，那你必須用 *.ts 的檔名來存入、引入。

2. Enum 如何轉換成 Type

這點可分為兩種。若你想讓生成的 Type 聯集是依照 enum 的 key 值形成，那可以使用 keyof typeof Enum。若想依照 enum 的 value 形成，那就再搭配 typeof enum 即可。

export enum BaseFormMode {
  CREATE = "create",
  UPDATE = "update",
}

typeof 可以讓你拿到 enum 或是 object 的推論型別，再搭配 keyof typeof 一同使用，就可以取得 enum 的 keys union 或是 values union。

// ["CREATE", "UPDATE"]
export type BaseFormModeType = [keyof typeof BaseFormMode]

// ['create', 'update']
export type BaseFormModeType = (typeof BaseFormMode)[keyof typeof BaseFormMode]