jsDoc npmモジュールクエスト

現在、私はレガシーな JS/React アプリケーションを作業/保守していますが、typesript に再加工するオプションがないため、JS の既存の開発時の型システムとして jsDoc を有効にしています。

TLDR;

Typescript npm モジュールは jsDoc によって作成され、useDuck は 70LOC 以下の redux の黄金時代を取り戻します。このモジュールは開発時の主な使用例であり、複雑な状態をタイプセーフに保つのに役立ちます。

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

jsdoc-duck

typescript から jsDoc への道

軽量な反応状態 npm ライブラリ、react-state-factory を作成したとき、私の typescript の経験はさらに深まりました

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

jsDoc の制限をテストする

作業を支援するためにいくつかの jsDoc アノテーションを使用し始めた後、次のステップはもう少し曖昧です。このモジュールを jsDoc に作り直します。一見すると、これは不可能なミッションです。しかし、jsDoc を理解するために数週間を費やした後、トンネルの終わりに光が見えてきました。

恐怖の型システム: レデューサー

ある時点で、reducer 関数を作成しようとすると、jsDoc 機能のハードリミットが見つかりました。結果は Quack ですが、もちろん空の {} が開始されます。そのため、その型は要求されたすべてのキーを含むオブジェクトに興味があるため、reducer の実行の最後だけが適切な Quack を作成しました。したがって、この問題は今のところ解決できません。誰かが解決方法を教えてくれるなら、私と共有するか、コラボレーターとしてこのモジュール開発に参加してください。

別の罠: TS のないモジュールには型がない

最初に、必要なすべての jsDoc @typedef を含む単一の js ファイルを作成します。遅かれ早かれ、これは機能するでしょう。そしてその瞬間、私は彼らのためにノードモジュールを作成するためのたった 1 つのステップを考えました。
しかし、悲しい事実として、エクスポートされた型を含む npm モジュールは jsDoc のみで動作しないため、d.ts をコンパイルすることが必須であるため、最後に jsDoc モジュールが 100% JS とは言わず、代わりにビルドでも typescript を使用します。

jsdoc-duckモジュールの@typedef

dev.to フォーラムでわかるように、構文のハイライトは jsDoc を認識しません。その他の間違った点として、私のテストでの @typedef は 1 行書いた場合にのみ機能するため、クリーンなコードに反します。

次回のブログ投稿では、このライブラリの具体的な使用例、sort: 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
 */

以上がjsDoc npmモジュールクエストの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。