Actuellement, je travaille/maintien d'anciennes applications js/react, où il n'y a aucune option pour retravailler en typeript, c'est pourquoi j'active jsDoc en tant que système de type de temps de développement existant pour JS.

TLDR ;

Les modules Typescript npm sont créés par jsDoc, useDuck ramène l'âge d'or du redux sous 70LOC. Ce module est principalement utilisé pendant la période de développement, lorsqu'il aide votre état complexe à rester sécurisé.

const [state, quack] = useDuck(reducer, initialState, actionsMap);

jsdoc-canard

Route vers la dactylographie vers jsDoc

Mon expérience avec TypeScript est devenue un peu plus profonde lorsque j'ai créé une bibliothèque npm d'état de réaction légère : react-state-factory

User declared 
state and actions types 
  -> useStateFactory 
  -> [state, dispatchedActoionCollection]

Tester les limites de jsDoc

Après avoir commencé à utiliser quelques annotations jsDoc pour m'aider dans mes travaux, l'étape suivante est un peu plus ambitieuse : retravailler ce module en jsDoc. A première vue, c'est une mission impossible. Mais après avoir passé quelques semaines à comprendre jsDoc, j'ai vu un peu de lumière à la fin du tunel.

Horreur du système de type : réducteur

À un certain point, j'ai trouvé une limite stricte de la capacité de jsDoc, lorsque j'essaie d'écrire une fonction de réduction, où le résultat est un Quack mais bien sûr, il démarre un {} vide. Ainsi, seule la fin de l'exécution du réducteur a créé le Quack approprié car ce type est curieux de savoir que l'objet contient toutes les clés demandées. Donc, ce problème jusqu'à présent, je ne peux pas le résoudre, si quelqu'un peut donner une bonne idée de comment puis-je le résoudre, partagez-le avec moi ou rejoignez le développement de ce module en tant que collaborateur.

Un autre piège : aucun type dans le module sans TS

Au début, je crée un seul fichier js qui contient tous les jsDoc @typedef nécessaires, tôt ou tard, cela fonctionnera. Et c'est le moment, je pense, juste une étape pour créer un module de nœud pour eux.
Mais le triste fait, sur le module npm qui contient des types exportés, ne fonctionne pas uniquement avec jsDoc, il est donc obligatoire de compiler un d.ts donc à la fin du module jsDoc, ne dites pas 100% JS à la place, la construction utilise également du typescript.

@typedef dans le module jsdoc-duck

Comme vous le reconnaissez sur le forum dev.to, la coloration syntaxique ne reconnaît pas le jsDoc. Autres mauvaises choses, ce @typedef dans mon test ne fonctionne que si vous écrivez une seule ligne, donc cela va à l'encontre d'un code propre.

Dans mon prochain article de blog, j'écrirai le cas d'utilisation concret de cette bibliothèque, trier : simplifier et sécuriser la gestion de l'état de réaction avec 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
 */