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"]]: Extractextends { payload: infer P } ? (payload: P) => void : () => void }} Quack */ /** * @template ST - State * @template AM - Actions Map * @typedef {(state: ST, action: AM) => ST} Reducer */
Disclaimer: All resources provided are partly from the Internet. If there is any infringement of your copyright or other rights and interests, please explain the detailed reasons and provide proof of copyright or rights and interests and then send it to the email: [email protected] We will handle it for you as soon as possible.
Copyright© 2022 湘ICP备2022001581号-3