近期在使用 TypeScript + Vite + Vue3 的專案中,引入 enum 的項目會發生 Failed to fetch dynamically imported module 的錯誤。經過一番探索後,發現是自己對 *.d.ts 和 *.ts 兩種檔案的用法不夠了解所導致的。
概念
*.d.ts 為 TypeScript 的宣告檔。你固然可以在裡面宣告 enum, type 之類的物件,不過在實際編譯執行時,這些 enum, type 型別的物件內容是會被忽略掉的。因此若你要在編譯後的程式碼使用這些 enum, type 的內容,你就不能使用 *.d.ts,而要用 *.ts 來取代。
參考資料
1. Vue3+TS错误解决 Failed to fetch dynamically imported module
2. Declare an ENUM in a Typescript Definition File
3. vue3入门39 – Vite 基础 – typeScript使用问题