Typescript

Usage

npm install 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,
  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 }]],
  },
});

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

Simplified Type

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

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

Full type

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

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

Type Href

Link the property to other places when used with Type Table.

Type Table will generate anchor ID automatically, you can use it to link to another type table.

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

On this page