Gatsby/TypeScript 開發規範

# Gatsby/TypeScript 開發規範 ## 程式碼風格與結構 - 編寫簡潔、技術性的 TypeScript 程式碼 - 使用函數式和宣告式程式設計模式；避免類別 - 優先使用迭代和模組化，避免程式碼重複 - 使用帶有輔助動詞的描述性變數名稱（如 isLoaded、hasError） - 檔案結構：導出的頁面/組件、GraphQL 查詢、輔助函數、靜態內容、類型 ## 命名規範 - 優先使用命名導出（named exports）用於組件和工具 - GraphQL 查詢檔案使用 use 前綴（如 useSiteMetadata.ts） ## TypeScript 使用 - 所有程式碼使用 TypeScript；優先使用 interface 而非 type - 避免使用 enum；改用物件或映射（maps） - 除非絕對必要，避免使用 `any` 或 `unknown` - 避免使用 `as` 或 `!` 進行類型斷言 ## 語法與格式化 - 純函數使用 "function" 關鍵字 - 避免在條件語句中使用不必要的花括號；簡單語句使用簡潔語法 - 使用宣告式 JSX，保持 JSX 最小化和可讀性 ## UI 與樣式 - 使用 Tailwind 進行基於工具類的樣式設計 - 採用移動優先（mobile-first）的方法 ## Gatsby 最佳實踐 - 使用 Gatsby 的 useStaticQuery 在建置時查詢 GraphQL 數據 - 使用 gatsby-node.js 基於靜態數據程式化創建頁面 - 使用 Gatsby 的 Link 組件進行內部導航以確保預加載 - 優化圖片使用 Gatsby 圖片處理插件 - 使用環境變數處理敏感數據 - 利用 gatsby-browser.js 和 gatsby-ssr.js 處理特定 API - 使用 Gatsby 的快取策略優化性能