【タイプドック】

TypeDoc とは?

💡 TypeScriptの型を読み解いてドキュメントに変えるウリ
📌 このページのポイント
TypeDoc のドキュメント生成フロー TypeScriptソース /** ユーザーを取得 */ function getUser( id: number ): User { ... } 型アノテーション + JSDocコメント TypeDoc 解析・変換 テーマ適用 APIドキュメント getUser(id) パラメータ: id: number 戻り値: User ユーザーを取得 入力 .ts / .tsx ファイル 処理 型情報+コメント解析 出力 HTML / Markdown TypeScriptの型システムを活かしたドキュメント自動生成
TypeDocのドキュメント生成フローのイメージ
ひよこ ひよこ

TypeDocって何をしてくれるツールなの?

ペンギン先生 ペンギン先生

TypeScriptソースコードを読み取って、クラスや関数の一覧、型情報、コメントなどをまとめたWebページを自動で作ってくれるツールだよ。JavaでいうJavadocのTypeScript版だね

ひよこ ひよこ

コメントを書かなくても動くの?

ペンギン先生 ペンギン先生

TypeScriptの型情報だけでもドキュメントは生成されるよ。でも、説明コメントを書いておくとずっと分かりやすくなるんだ。JSDocスタイルの /** */ コメントに対応しているよ

ひよこ ひよこ

どうやって使うの?

ペンギン先生 ペンギン先生

npm install typedoc でインストールして、npx typedoc src/index.ts のようにエントリーポイントを指定するだけ。docsフォルダHTMLが生成されるよ。設定ファイルで出力先やテーマも変えられるんだ

ひよこ ひよこ

ライブラリを公開するときに便利そうだね!

ペンギン先生 ペンギン先生

まさにそう。npmパッケージを公開するとき、TypeDocで生成したドキュメントGitHub Pagesにデプロイするのが定番パターンだよ。利用者が関数のシグネチャや型の定義をすぐに確認できるから、ライブラリの使い勝手が格段に上がるんだ

ひよこ ひよこ

プラグインでどんなことができるの?

ペンギン先生 ペンギン先生

Markdown形式で出力するプラグインや、モノレポの複数パッケージをまとめてドキュメント化するプラグインなどがあるよ。typedoc-plugin-markdownを使えば、VitePressやDocusaurusに組み込めるドキュメントが生成できるんだ。TypeScript型システムをフル活用したドキュメントは、他のツールでは真似できない強みだね

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「TypeDoc」って出てきたら「TypeScriptのコードからAPI仕様書を自動生成するツール」と思えればだいたいOK!
📖 おまけ:英語の意味
「TypeDoc」 = TypeScript + Documentation
💬 「TypeScript」と「Documentation(ドキュメント)」を組み合わせた名前だよ
← 用語集にもどる