jsDoc npm module 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.

TLDR;

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

Road to typescript to jsDoc

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]

Testing the jsDoc limits

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.

Horror of type system: reducer

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.

Another trap: No types in module without TS

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.

@typedef in jsdoc-duck module

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
 */

The above is the detailed content of jsDoc npm module quest. For more information, please follow other related articles on the PHP Chinese website!