自動型テーブル

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

npm install fumadocs-typescript

UI との統合アンカーリンクをコピー

AutoTypeTable コンポーネントが用意されています。詳しくは自動型テーブルを参照してください。

MDX との統合アンカーリンクをコピー

remarkAutoTypeTable は remark プラグインです。設定に追加してください。

import {
  remarkAutoTypeTable,
  createGenerator,
  createFileSystemGeneratorCache,
} from 'fumadocs-typescript';
import { defineConfig } from 'fumadocs-mdx/config';

const generator = createGenerator({
  // 推奨: キャッシュ用のディレクトリを指定します
  cache: createFileSystemGeneratorCache('.cache/fumadocs-typescript'),
});

export default defineConfig({
  mdxOptions: {
    remarkPlugins: [[remarkAutoTypeTable, { generator }]],
  },
});

これにより、auto-type-table コンポーネントを利用できるようになります。

自動型テーブルと同じように使用できますが、次のルールが追加されます。

• 属性の値は文字列である必要があります。
• path には、MDX ファイル自体からの相対パスを指定します。
• MDX コンポーネントに TypeTable も追加する必要があります。

export interface MyInterface {
  name: string;
}

<auto-type-table path="./path/to/file.ts" name="MyInterface" />

アノテーションアンカーリンクをコピー

非表示にするアンカーリンクをコピー

フィールドに @internal TSDoc タグを付けると、そのフィールドを非表示にできます。

interface MyInterface {
  /**
   * @internal
   */
  cache: number;
}

簡略化された型アンカーリンクをコピー

TSDoc の @remarks タグを使用すると、型の簡略名を指定できます。

interface MyInterface {
  /**
   * @remarks `timestamp` API から返されます。 // [!code highlight]
   */
  time: number;
}

これにより、time プロパティの型が timestamp として表示されます。

完全な型アンカーリンクをコピー

@fumadocsType TSDoc タグを使用すると、型の完全な名前を指定できます。

interface MyInterface {
  /**
   * @fumadocsType `MyBeautifulClient` // [!code highlight]
   */
  client: MyClient;
}

Type Hrefアンカーリンクをコピー

型テーブルと組み合わせて使用すると、プロパティから他の場所へリンクできます。

型テーブルはアンカー ID を自動で生成するため、それを使って別の型テーブルへリンクできます。

interface MyInterface {
  /**
   * @fumadocsHref #type-table-temp.ts-MyClass-test
   */
  client: MyClient;
}