# Fumadocs (Framework Mode, Astro): Auto Type Table
URL: /zh-TW/docs/astro/markdown/typescript
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/(framework)/[framework]/markdown/typescript.zh-TW.mdx

從 TypeScript 型別定義產生文件

## 使用方式 [#usage]

```package-install
fumadocs-typescript
```

### UI 整合 [#ui-integration]

此功能內建 `AutoTypeTable` 元件。若想了解更多，請參閱 [Auto Type Table](/docs/ui/components/auto-type-table)。

### MDX 整合 [#mdx-integration]

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

```ts title="source.config.ts" tab="unified"
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 }]],
  },
});
```

```ts title="source.config.ts" tab="Sätteri"
import { createGenerator, createFileSystemGeneratorCache } from 'fumadocs-typescript';
import { remarkAutoTypeTable } from '@fumadocs/satteri/remark-auto-type-table';
import { defineConfig, defineDocs } from 'fumadocs-mdx/config';

const generator = createGenerator({
  // 建議：指定一個快取目錄
  cache: createFileSystemGeneratorCache('.cache/fumadocs-typescript'),
});

export const docs = defineDocs({
  docs: {
    compiler: 'satteri',
  },
});

export default defineConfig({
  satteriOptions: {
    mdastPlugins: [remarkAutoTypeTable({ generator })],
  },
});
```

它會提供一個 `auto-type-table` 元件。

您可以像使用 [Auto Type Table](/docs/ui/components/auto-type-table) 一樣使用它，但需遵守以下額外規則：

* 屬性值必須是字串。
* `path` 接受相對於該 MDX 檔案本身的路徑。
* 您還需要將 [`TypeTable`](/docs/ui/components/type-table) 加入 MDX 元件中。

```ts title="path/to/file.ts"
export interface MyInterface {
  name: string;
}
```

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

<Callout type="warn">
請勿將不受信任的值傳給 `path`，因為它能讀取您電腦上的任何 TypeScript 檔案。
</Callout>

## 註解標記 [#annotations]

### 隱藏 [#hide]

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

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

### 簡化型別 [#simplified-type]

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

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

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

### 完整型別 [#full-type]

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

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

### 型別 Href [#type-href]

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

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

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