Typescript

使用

🌐 Usage

npm install fumadocs-typescript

界面集成

🌐 UI Integration

它配备了 AutoTypeTable 组件。了解更多关于 自动类型表 的信息。

🌐 It comes with the AutoTypeTable component. Learn more about Auto Type Table.

MDX 集成

🌐 MDX Integration

你可以将它用作 remark 插件：

🌐 You can use it as a remark plugin:

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

const generator = createGenerator({
  // recommended: choose a directory for cache
  cache: createFileSystemGeneratorCache('.next/fumadocs-typescript'),
});

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

它会给你一个 auto-type-table 组件。

🌐 It gives you a auto-type-table component.

你可以像使用 自动填写表格 一样使用它，但有额外的规则：

🌐 You can use it like Auto Type Table, but with additional rules:

• 属性的值必须是字符串。
• path 接受相对于 MDX 文件本身的路径。
• 你还需要将 TypeTable 添加到 MDX 组件中。

export interface MyInterface {
  name: string;
}

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

注释

🌐 Annotations

隐藏

🌐 Hide

通过添加 @internal tsdoc 标签来隐藏字段。

🌐 Hide a field by adding @internal tsdoc tag.

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

简化类型

🌐 Simplified Type

你可以使用 @remarks tsdoc 标签指定类型的简化名称。

🌐 You can specify the simplified name of a type with the @remarks tsdoc tag.

interface MyInterface {
  /**
   * @remarks `timestamp` Returned by API. // [!code highlight]
   */
  time: number;
}

这将使 time 属性的类型显示为 timestamp。

🌐 This will make the type of time property to be shown as timestamp.

全类型

🌐 Full type

你可以使用 @fumadocsType tsdoc 标签指定类型的全名。

🌐 You can specify the full name of a type with the @fumadocsType tsdoc tag.

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