jsDoc npm 模組任務

目前我正在工作/維護遺留的js/react 應用程序，其中沒有選項可以重新工作到typesript，所以這就是為什麼我打開jsDoc 作為JS 的現有開發時類型系統。

太長了；

Typescript npm 模組由 jsDoc 製作，useDuck 在 70LOC 下帶回了 redux 的黃金時代。此模組在開發時的主要用例，可幫助您的複雜狀態保持類型安全。

const [state, quack] = useDuck(reducer, initialState, actionsMap);

jsdoc-duck

從 Typescript 到 jsDoc 之路

當我建立了一個輕量級的 React State npm 函式庫時，我對 TypeScript 的體驗更深入了：react-state-factory

User declared 
state and actions types 
  -> useStateFactory 
  -> [state, dispatchedActoionCollection]

測試 jsDoc 限制

在我開始使用一些 jsDoc 註解來幫助我的工作之後，下一步有點更加大膽：將此模組重新設計為 jsDoc。乍一看，這是一項不可能的任務。但在花了幾週時間了解 jsDoc 後，我看到了一些曙光。

恐怖類型系統：減速機

在某個點上，當我嘗試編寫一個reducer函數時，我發現了jsDoc能力的硬限制，結果是一個Quack，但當然它啟動了一個空的{}。因此，只有reducer運行結束時才創建了正確的Quack，因為該類型對包含所有請求的鍵的物件感到好奇。所以這個問題到現在我都無法解決，如果有人能給我一個好主意，我該如何解決它，請與我分享或作為合作者加入這個模組開發。

另一個陷阱：沒有 TS 的模組中沒有類型

一開始我創建了一個 js 文件，其中包含所有必要的 jsDoc @typedef，遲早它會起作用。這就是我認為為他們創建節點模組的一步。
但可悲的事實是，包含導出類型的 npm 模組不能僅與 jsDoc 一起使用，因此必須編譯 d.ts，因此最後 jsDoc 模組不要說 100% JS，而是構建也使用 typescript。

jsdoc-duck 模組中的@typedef

正如您在 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中文網其他相關文章！