Derzeit arbeite/warte ich ältere JS/React-Anwendungen, bei denen es keine Möglichkeit gibt, auf TypeScript umzuarbeiten, weshalb ich jsDoc als bestehendes Entwicklungszeittypsystem für JS einschalte.

TLDR;

Typescript-NPM-Module werden von jsDoc erstellt, useDuck bringt das goldene Zeitalter von Redux unter 70LOC zurück. Dieses Modul wird hauptsächlich in der Entwicklungszeit eingesetzt, wenn es dabei hilft, dass Ihr komplexer Zustand typsicher bleibt.

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

jsdoc-duck

Weg zum Typoskript zu jsDoc

Meine Erfahrungen mit Typoskript sind etwas tiefer gegangen, als ich eine leichtgewichtige React-State-NPM-Bibliothek erstellt habe: React-State-Factory

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

Testen der jsDoc-Grenzwerte

Nachdem ich einige jsDoc-Annotationen zur Unterstützung meiner Arbeit verwendet habe, ist der nächste Schritt etwas ehrgeiziger: Überarbeiten Sie dieses Modul in jsDoc. Auf den ersten Blick ist dies eine unmögliche Mission. Aber nachdem ich ein paar Wochen damit verbracht hatte, jsDoc zu verstehen, sah ich etwas Licht am Ende des Tunels.

Horrortypsystem: Reduzierer

Ab einem bestimmten Punkt habe ich eine harte Grenze der jsDoc-Fähigkeit festgestellt, wenn ich versuche, eine Reduzierfunktion zu schreiben, bei der das Ergebnis ein Quack ist, aber natürlich ein leeres {} gestartet wird. Daher wurde erst am Ende des Reduziererlaufs der richtige Quack erstellt, da dieser Typ neugierig darauf ist, dass das Objekt alle angeforderten Schlüssel enthält. Daher kann ich dieses Problem bisher nicht lösen. Wenn jemand eine gute Idee hat, wie ich es lösen kann, teilen Sie es mir bitte mit oder beteiligen Sie sich als Mitarbeiter an der Modulentwicklung.

Eine weitere Falle: Keine Typen im Modul ohne TS

Zu Beginn erstelle ich eine einzelne JS-Datei, die alle erforderlichen jsDoc @typedef enthält. Früher oder später wird dies funktionieren. Und das ist meiner Meinung nach nur ein Schritt, um ein Knotenmodul für sie zu erstellen.
Aber die traurige Tatsache ist, dass npm-Module, die exportierte Typen enthalten, nicht nur mit jsDoc funktionieren, daher ist es zwingend erforderlich, ein d.ts zu kompilieren, sodass am Ende des jsDoc-Moduls nicht 100 % JS angegeben wird, sondern der Build auch Typoskript verwendet.

@typedef im jsdoc-duck-Modul

Wie Sie im dev.to-Forum erkennen, erkennt die Syntaxhervorhebung das jsDoc nicht. Andere falsche Dinge: Dieses @typedef in meinem Test funktioniert nur, wenn Sie eine einzelne Zeile schreiben, was gegen sauberen Code verstößt.

In meinem nächsten Blogbeitrag werde ich über den konkreten Anwendungsfall dieser Bibliothek schreiben: Sortieren: Vereinfachen und typsichern Sie die Handhabung des Reaktionsstatus mit 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
 */