目前我正在工作/維護遺留的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 之後，我在tunel 的末尾看到了一些曙光。

恐怖類型系統：減速機

在某個點下，當我嘗試編寫一個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 extends { payload: infer P } ? (payload: P) => void : () => void }} Quack */

/**
 * @template ST - State
 * @template AM - Actions Map
 * @typedef {(state: ST, action: AM) => ST} Reducer
 */