首頁 > web前端 > js教程 > jsDoc npm 模組任務

jsDoc npm 模組任務

PHPz
發布: 2024-08-30 19:06:25
原創
516 人瀏覽過

jsDoc npm module quest

目前我正在工作/維護遺留的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中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板