MUKI space*
Front-end Development,
Effective Note-Taking.
使用 ts-rest 與 Zod 定義 API 合約和進行資料驗證
本文介紹如何使用 ts-rest 與 Zod 來建立型別安全的 API 合約及進行資料驗證。 ts-rest 是一個專為 TypeScript 設計的工具，能夠幫助開發者輕鬆定義和管理 API 合約，確保前後端的一致性。 Zod 則是一個資料驗證套件，能在執行階段驗證資料的完整性和正確性。文章提供了一個完整的前後端範例，後端使用 Node.js 搭配 Express 框架，前端使用 React.js，並詳細介紹了如何定義 API 路由和使用 Zod 驗證資料。
文章中描述的開發步驟包括：首先使用 ts-rest 定義 API 合約，確保每個 API 路由都有明確的類型定義；接著使用 Zod 驗證資料結構，確保符合預期格式。後端部分，使用 Express 框架建立 API 路由，並透過 ts-rest 將 API 合約與 Express Server 連接，實現資料處理的邏輯。前端則透過 ts-rest 呼叫後端 API，並展示如何在 React 中實作這些功能。文章最後提供了 CodeSandbox 的程式碼範例，供讀者進一步探索和測...
什麼是 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，方便他人使用。...