Auto Type Table

使用方式

npm install fumadocs-typescript

UI 整合

此功能內建 AutoTypeTable 元件。若想了解更多，請參閱 Auto Type Table。

MDX 整合

remarkAutoTypeTable 是一個 remark 外掛，請將它加入您的設定檔：

source.config.ts

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 元件。

您可以像使用 Auto Type Table 一樣使用它，但需遵守以下額外規則：

屬性值必須是字串。
path 接受相對於該 MDX 檔案本身的路徑。
您還需要將 TypeTable 加入 MDX 元件中。

path/to/file.ts

export interface MyInterface {
  name: string;
}

page.mdx

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

請勿將不受信任的值傳給 path，因為它能讀取您電腦上的任何 TypeScript 檔案。

註解標記

隱藏

為欄位加上 @internal TSDoc 標籤，即可將其隱藏。

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

簡化型別

您可以使用 TSDoc 的 @remarks 標記來指定型別的簡化名稱。

interface MyInterface {
  /**
   * @remarks `timestamp` 由 API 回傳。 // [!code highlight]
   */
  time: number;
}

這會讓 time 屬性的型別顯示為 timestamp。

完整型別

您可以使用 TSDoc 標籤 @fumadocsType 來指定型別的完整名稱。

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

型別 Href

搭配型別表格使用時，可將屬性連結至其他位置。

型別表格會自動產生錨點 ID，您可以利用它連結到其他型別表格。

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

使用方式複製錨點連結

UI 整合複製錨點連結

MDX 整合複製錨點連結

註解標記複製錨點連結

隱藏複製錨點連結

簡化型別複製錨點連結

完整型別複製錨點連結

型別 Href複製錨點連結

本頁目錄