Heim >Web-Frontend >js-Tutorial >jsDoc npm Modul-Quest
Currently I am working/maintaning legacy js/react applications, where is no option to rework to typesript, so that why I turning on jsDoc as exsisting development time type system for JS.
Typescript npm module are maded by jsDoc, useDuck bring back the golden age of redux under 70LOC. This module main usecase in development time, when help your complex state stay typesafe.
const [state, quack] = useDuck(reducer, initialState, actionsMap);
jsdoc-duck
My experience with typescript are go bit deeper when I created a lightweight react state npm library: react-state-factory
User declared state and actions types -> useStateFactory -> [state, dispatchedActoionCollection]
After I start used a few jsDoc annotation to help my works, the next step is a bit more ambicious: rework this module to jsDoc. At first sight this is a impossible mission. But after spend a few weeks to understund jsDoc I was saw some light at end of tunel.
Under a certain point I found a hard limit of jsDoc capability, when I try to write a reducer function, where the result is a Quack but of course it is starting a empty {}. So only the end of reducer run created the proper Quack because that type are curious about object contain all requested key. So this problem until now I cannot able to solve it, if any one can give a good idea how can I solve it please share with me or join to this modul development as collaborator.
At the start I create a single js file which are contain all nececcary jsDoc @typedef, sooner or later this will working. And thats moment I think just one step to create node module for them.
But the sad fact, on npm module which contain exported types are not working with jsDoc only, so mandatory to compile a d.ts so at the end jsDoc module do not say 100% JS instead the build use typescript also.
As you recognize in dev.to forum the syntax highlight don't recognize the jsDoc. Other wrong things this @typedef in my test just works if you write a single line, so it going against clean code.
In my next blogpost I will write is the concrete usecase of this library, sort: simplify and typesafe the react state handling with 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 */
Das obige ist der detaillierte Inhalt vonjsDoc npm Modul-Quest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!