自动类型表

它会根据 TypeScript 定义为你的文档生成一个表格。

🌐 It generates a table for your docs based on TypeScript definitions.

使用

🌐 Usage

npm i fumadocs-typescript

初始化 TypeScript 编译器并将其添加为 MDX 组件。

🌐 Initialize the TypeScript compiler and add it as a MDX component.

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

const generator = createGenerator({
  // set a cache, necessary for serverless platform like Vercel
  cache: createFileSystemGeneratorCache('.next/fumadocs-typescript'),
});

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

你现在可以在 MDX 内容中引用 <AutoTypeTable />。

🌐 You can now reference <AutoTypeTable /> in your MDX content.

有关更多用法，请参见 TypeScript DocGen。

🌐 See TypeScript DocGen for more usages.

从文件

🌐 From File

它接受一个指向 TypeScript 文件的 path 属性，以及用于导出类型名称的 name。

🌐 It accepts a path prop that points to a typescript file, and name for the exported type name.

export interface MyInterface {
  name: string;
}

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

该路径是相对于你的项目目录（cwd），因为 AutoTypeTable 是一个 React 服务器组件，它无法访问构建时信息，例如 MDX 文件路径。

🌐 The path is relative to your project directory (cwd), because AutoTypeTable is a React Server Component, it cannot access build-time information like MDX file path.

从类型

🌐 From Type

你可以指定要生成的类型，而无需实际的 TypeScript 文件。

🌐 You can specify the type to generate, without an actual TypeScript file.

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

当提供 path 时，它与 TypeScript 文件共享相同的上下文。

🌐 When a path is given, it shares the same context as the TypeScript file.

export type A = { hello: string };

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

当 type 有多行时，导出语句和 name 属性都是必需的。

🌐 When type has multiple lines, the export statement and name prop are required.

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

函数

🌐 Functions

请注意，只允许使用对象类型。对于函数，你应该将它们封装到对象中。

🌐 Notice that only object type is allowed. For functions, you should wrap them into an object instead.

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

TypeScript 编译器

🌐 TypeScript Compiler

在底层，它使用 Typescript 编译器 API 来提取类型信息。你当前工作目录中的 tsconfig.json 文件将被加载。

🌐 Under the hood, it uses the Typescript Compiler API to extract type information. Your tsconfig.json file in the current working directory will be loaded.

你可以在 createGenerator() 中更改编译器设置。

🌐 You can change the compiler settings from createGenerator().

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

const generator = createGenerator({
  tsconfigPath: './tsconfig.json',
  // where to resolve relative paths (normally cwd)
  basePath: './',
  // other options...
});

文件系统

🌐 File System

它依赖于文件系统，因此，引用该组件的页面必须在构建时构建。在无服务器运行时渲染该组件可能会导致问题。

🌐 It relies on the file system, hence, the page referencing this component must be built in build time. Rendering the component on serverless runtime may cause problems.

参考文献

🌐 References