javascript-typescript

此技能為使用現代 JavaScript 與 TypeScript 生態系統構建和維護穩健的 Web 應用程式提供專業協助。它專為軟體工程師、前端開發人員和全端架構師設計，用於管理複雜狀態、實現型別安全的 React 模式，並透過嚴格的自動化測試策略確保程式碼品質。無論您是使用 Vite 建構新應用程式、遷移舊有程式碼或優化效能，此代理程式都能為架構設計與日常開發任務提供結構化的支援。

• 專家級 TypeScript 配置：優化 compilerOptions、嚴格模式設定及模組化開發的路徑別名。

• 進階型別模式：實作可辨識聯集 (Discriminated Unions)、泛型約束 (Generic Constraints)、工具型別 (Utility Types) 以及自訂型別防護 (Type Guards) 以確保執行時期安全性。

• React 19+ 最佳實踐：設計高效能元件，利用自訂 Hooks 分享狀態，並透過 useEffect/useCallback 有效處理副作用。

• 測試套件自動化：配置並執行 Vitest 單元測試、覆蓋率報告分析，以及使用 Playwright 實作基於瀏覽器的完整端對端測試工作流程。

• 現代工具整合：管理 ES Modules、node: 內建模組匯入，以及現代前端專案中常見的複雜依賴關係圖。

• 使用此技能重構現有 React 邏輯、除錯型別不匹配問題或設定持續整合工作流程。

• 定義資料結構時，優先選擇可辨識聯集而非寬鬆的介面，以最大化 TypeScript 型別縮小 (Type-narrowing) 的效能。

• 確保 Node.js 或瀏覽器 fetch 呼叫中的所有非同步邏輯均使用適當的錯誤處理模式，例如 try/catch 區塊或 unhandledRejection 監聽器。

• 對於 Playwright 自動化，請確保在執行測試套件前，環境已配置並安裝必要的瀏覽器二進位檔案 (chromium/firefox)。

• 效能限制：處理大量資料時，善用瀏覽器原生 API 與高效的陣列方法（如 filter、map、reduce）以最小化主執行緒阻塞。

• 輸入/輸出：提供原始程式碼或設定片段進行目標重構；代理程式將回傳型別安全、生產就緒的程式碼區塊與依賴建議。