MUKI space*
Front-end Development,
Effective Note-Taking.
什麼是 ts-rest？論 TypeScript Interface 的局限性與前後端導入 ts-rest 的優缺點
在前後端開發中，使用 TypeScript Interface 來定義 API 型別存在一些局限性，如前後端型別不一致和型別驗證不嚴謹等問題。這些問題在專案變得複雜時尤其明顯，因為 API 回應資料來自外部服務，無法保證每次都符合定義的型別。為了解決這些問題，ts-rest 提供了一種自動化的型別同步工具，能夠在前後端之間自動同步 API 型別，並結合 Zod 進行動態驗證，確保資料完整性。
然而，ts-rest 的最佳使用方式是前後端共同導入，這在台灣的產業生態中並不容易實現。即便如此，前端單獨導入 ts-rest 仍能透過 Zod 提供的型別驗證機制，減少錯誤發生的機率，相較於手動建立 TypeScript Interface，ts-rest 能夠提供更強大的型別檢查與資料驗證，特別適合大型或 API 變動頻繁的專案。儘管如此，對於小型或型別驗證需求不高的專案，手動建立 TypeScript Interface 仍然是一個合理的選擇...
Vue3 安裝 TypeScript 的 Vue-i18n 多國語系
安裝 Vue-i18n 支援 Vue3，需使用 V9 版本。首先在專案中安裝 vue-i18n@9，然後在 src/ 目錄下新增 plugins/i18n.ts，設定語系資料。將 Vue-i18n 拆成獨立檔案，或直接在 main.ts 設定。接著在 main.ts 引入並使用 i18n。
在 src/ 目錄下新增 languages/ 資料夾，創建 zh-TW.json 和 en-US.json 檔案。使用 $t 函數進行語系切換，並在 HelloWorld.vue 中範例展示如何切換語言。執行 npm run dev 查看效果。
在外部檔案如 .ts 中使用 i18n，需引入 i18n 檔案，使用 t 函數調用語系檔案。Vue-i18n 提供 TypeScript 文件供參考。...
用 Vue3 + Vite + TypeScript + TailwindCSS + ESLint 新增專案
想練習 TypeScript，使用 Vue3、Vite、TypeScript、TailwindCSS 和 ESLint 建立新專案。首先，安裝 Vite 與 TypeScript，確認在瀏覽器輸入 https://localhost:5173 出現畫面。接著，安裝 TailwindCSS，修改 tailwind.config.cjs 和 style.css，確保樣式生效。
安裝 ESLint 及相關插件，設定 .eslintrc.cjs 和 vite.config.ts，確保程式碼格式檢查正常運行。最後，安裝 standard 規範，並將模板上傳至 GitHub，方便他人使用。...