Typescript | Hanzo Docs

Usage

npm

pnpm

yarn

bun

npm install hanzo-docs-typescript

pnpm add hanzo-docs-typescript

yarn add hanzo-docs-typescript

bun add hanzo-docs-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:

Hanzo Docs MDX

MDX Compiler

source.config.ts

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

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

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

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

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

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

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 @hanzo-docsType tsdoc tag.

interface MyInterface {
  /**
   * @hanzo-docsType `MyBeautifulClient`
   */
  client: MyClient;
}