目前我正在工作/維護遺留的js/react 應用程序,其中沒有選項可以重新工作到typesript,所以這就是為什麼我打開jsDoc 作為JS 的現有開發時類型系統。
Typescript npm 模組由 jsDoc 製作,useDuck 在 70LOC 下帶回了 redux 的黃金時代。此模組在開發時的主要用例,可幫助您的複雜狀態保持類型安全。
const [state, quack] = useDuck(reducer, initialState, actionsMap);
jsdoc-duck
當我建立了一個輕量級的 React State npm 函式庫時,我對 TypeScript 的體驗更深入了:react-state-factory
User declared state and actions types -> useStateFactory -> [state, dispatchedActoionCollection]
在我開始使用一些 jsDoc 註解來幫助我的工作之後,下一步有點更加大膽:將此模組重新設計為 jsDoc。乍一看,這是一項不可能的任務。但在花了幾週時間了解 jsDoc 後,我看到了一些曙光。
在某個點上,當我嘗試編寫一個reducer函數時,我發現了jsDoc能力的硬限制,結果是一個Quack,但當然它啟動了一個空的{}。因此,只有reducer運行結束時才創建了正確的Quack,因為該類型對包含所有請求的鍵的物件感到好奇。所以這個問題到現在我都無法解決,如果有人能給我一個好主意,我該如何解決它,請與我分享或作為合作者加入這個模組開發。
一開始我創建了一個 js 文件,其中包含所有必要的 jsDoc @typedef,遲早它會起作用。這就是我認為為他們創建節點模組的一步。
但可悲的事實是,包含導出類型的 npm 模組不能僅與 jsDoc 一起使用,因此必須編譯 d.ts,因此最後 jsDoc 模組不要說 100% JS,而是構建也使用 typescript。
正如您在 dev.to 論壇中所認識到的,語法高亮無法識別 jsDoc。其他錯誤的事情在我的測試中,如果你只寫一行,這個 @typedef 就會起作用,所以它違反了乾淨的程式碼。
在我的下一篇部落格文章中,我將寫的是這個庫的具體用例,排序:使用 useReducer 簡化和類型安全反應狀態處理。
/** * @template T - Payload Type * @typedef {T extends { type: infer U, payload?: infer P } ? { type: U, payload?: P } : never} ActionType */ // @ts-ignore /** @template AM - Actions Map @typedef {{ [K in AM['type']]: K }} Labels */ // @ts-ignore /** @template AM - Actions Map @typedef {{ [T in AM["type"]]: Extract<AM, { type: T }> extends { payload: infer P } ? (payload: P) => void : () => void }} Quack */ /** * @template ST - State * @template AM - Actions Map * @typedef {(state: ST, action: AM) => ST} Reducer */
以上是jsDoc npm 模組任務的詳細內容。更多資訊請關注PHP中文網其他相關文章!