【タイプドック】

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(ドキュメント)」を組み合わせた名前だよ
← 用語集にもどる