自動型テーブル

TypeScript の型定義をもとに、ドキュメント用のテーブルを生成します。

使い方アンカーリンクをコピー

npm i fumadocs-typescript

TypeScript コンパイラを初期化し、MDX コンポーネントとして追加します。

import defaultComponents from 'fumadocs-ui/mdx';
import type { MDXComponents } from 'mdx/types';
import { createGenerator, createFileSystemGeneratorCache } from 'fumadocs-typescript';
import { AutoTypeTable, type AutoTypeTableProps } from 'fumadocs-typescript/ui';

const generator = createGenerator({
  // キャッシュを設定（Vercel などのサーバーレスプラットフォームでは必須）
  cache: createFileSystemGeneratorCache('.next/fumadocs-typescript'),
});

export function getMDXComponents(components?: MDXComponents) {
  return {
    ...defaultComponents,
    AutoTypeTable: (props: Partial<AutoTypeTableProps>) => (
      <AutoTypeTable {...props} generator={generator} />
    ),
    ...components,
  } satisfies MDXComponents;
}

これで、MDX コンテンツ内で <AutoTypeTable /> を使用できます。

その他の使い方については、TypeScript DocGen を参照してください。

ファイルからアンカーリンクをコピー

TypeScript ファイルのパスを指定する path prop と、エクスポートされた型の名前を指定する name を受け取ります。

export interface MyInterface {
  name: string;
}

<AutoTypeTable path="./path/to/file.ts" name="MyInterface" />

パスはプロジェクトディレクトリ (cwd) からの相対パスです。AutoTypeTable は React のサーバーコンポーネントであるため、MDX ファイルのパスなどのビルド時の情報にはアクセスできません。

型から生成アンカーリンクをコピー

実際の TypeScript ファイルを用意しなくても、生成対象の型を直接指定できます。

<AutoTypeTable type="{ hello: string }" />

path を指定した場合、TypeScript ファイルと同じコンテキストを共有します。

export type A = { hello: string };

<AutoTypeTable path="file.ts" type="A & { world: string }" />

type が複数行にわたる場合は、export 文と name prop が必須です。

<AutoTypeTable
  path="file.ts"
  name="B"
  type={`
import { ReactNode } from "react"
export type B = ReactNode | { world: string }
`}
/>

関数アンカーリンクをコピー

使用できるのはオブジェクト型のみである点に注意してください。関数を渡したい場合は、代わりにオブジェクトでラップしてください。

export interface MyInterface {
  myFn: (input: string) => void;
}

TypeScript コンパイラアンカーリンクをコピー

内部では Typescript Compiler API を使用して型情報を抽出します。 現在の作業ディレクトリにある tsconfig.json ファイルが読み込まれます。

コンパイラの設定は createGenerator() で変更できます。

import { createGenerator, createFileSystemGeneratorCache } from 'fumadocs-typescript';

const generator = createGenerator({
  tsconfigPath: './tsconfig.json',
  // 相対パスを解決する基準ディレクトリ (通常は cwd)
  basePath: './',
  // その他のオプション...
});

ファイルシステムアンカーリンクをコピー

このコンポーネントはファイルシステムに依存しているため、これを参照するページはビルド時にビルドする必要があります。サーバーレスランタイム上でこのコンポーネントをレンダリングすると、問題が発生する可能性があります。

リファレンスアンカーリンクをコピー