ホームページ > 記事 > ウェブフロントエンド > jsDoc npmモジュールクエスト
現在、私はレガシーな JS/React アプリケーションを作業/保守していますが、typesript に再加工するオプションがないため、JS の既存の開発時の型システムとして jsDoc を有効にしています。
Typescript npm モジュールは jsDoc によって作成され、useDuck は 70LOC 以下の redux の黄金時代を取り戻します。このモジュールは開発時の主な使用例であり、複雑な状態をタイプセーフに保つのに役立ちます。
const [state, quack] = useDuck(reducer, initialState, actionsMap);
jsdoc-duck
軽量な反応状態 npm ライブラリ、react-state-factory を作成したとき、私の typescript の経験はさらに深まりました
User declared state and actions types -> useStateFactory -> [state, dispatchedActoionCollection]
作業を支援するためにいくつかの jsDoc アノテーションを使用し始めた後、次のステップはもう少し曖昧です。このモジュールを jsDoc に作り直します。一見すると、これは不可能なミッションです。しかし、jsDoc を理解するために数週間を費やした後、トンネルの終わりに光が見えてきました。
ある時点で、reducer 関数を作成しようとすると、jsDoc 機能のハードリミットが見つかりました。結果は Quack ですが、もちろん空の {} が開始されます。そのため、その型は要求されたすべてのキーを含むオブジェクトに興味があるため、reducer の実行の最後だけが適切な Quack を作成しました。したがって、この問題は今のところ解決できません。誰かが解決方法を教えてくれるなら、私と共有するか、コラボレーターとしてこのモジュール開発に参加してください。
最初に、必要なすべての jsDoc @typedef を含む単一の js ファイルを作成します。遅かれ早かれ、これは機能するでしょう。そしてその瞬間、私は彼らのためにノードモジュールを作成するためのたった 1 つのステップを考えました。
しかし、悲しい事実として、エクスポートされた型を含む npm モジュールは jsDoc のみで動作しないため、d.ts をコンパイルすることが必須であるため、最後に jsDoc モジュールが 100% JS とは言わず、代わりにビルドでも typescript を使用します。
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 サイトの他の関連記事を参照してください。