Auto Type Table

Usage

npm install fumadocs-typescript

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

import { createTypeTable } from 'fumadocs-typescript/ui';
import defaultMdxComponents from 'fumadocs-ui/mdx';
 
const { AutoTypeTable } = createTypeTable();
 
<MDX
  components={{
    ...defaultMdxComponents,
    AutoTypeTable,
  }}
/>;

It accepts a path prop which should be a typescript file, and name for the exported type name.

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

type

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

import { AutoTypeTable } from 'fumadocs-typescript/ui';
 
<AutoTypeTable type="{ hello: string }" />

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 }" />

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;
}

Auto Type Table

File System

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

Deep Dive

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.

To change the compiler settings, pass a options prop to the component.

Learn more about Typescript Docs Generation.