Typescript

Usage

npm install fumadocs-typescript

pnpm add fumadocs-typescript

yarn add fumadocs-typescript

bun add fumadocs-typescript

UI Integration

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

MDX Integration

You can use it as a remark plugin:

source.config.ts

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

const generator = createGenerator();

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

import { remarkAutoTypeTable, createGenerator } from 'fumadocs-typescript';
import { compile } from '@mdx-js/mdx';

const generator = createGenerator();

await compile('...', {
  remarkPlugins: [[remarkAutoTypeTable, { generator }]],
});

It gives you a auto-type-table component.

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

The value of attributes must be string.
path accepts a path relative to the MDX file itself.
You also need to add TypeTable to MDX components.

path/to/file.ts

export interface MyInterface {
  name: string;
}

page.mdx

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

Annotations

Hide

Hide a field by adding @internal tsdoc tag.

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

Specify Type Name

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

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

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