Docz：如何将除接口以外的Typescript定义呈现为props

Question

我们正在用Docz记录我们的类型定义。它对于接口一直很好用，但是除了提供Docz组件的接口外，其他东西都没有，因为道具似乎无法渲染任何东西。

我想知道如何呈现枚举或联合类型并使之能够在mdx中呈现。

在docz文件中使用它们的方式如下：

interface.tsx：

import {
  UserOrganisation,
  UserLevel
} from "~/packages/database-interfaces/src";

export const UserLevelC = (props: UserLevel) => {};
export const UserOrganisationC = (props: UserOrganisation) => {};

index.mdx：

---
name: users
menu: Database/Realtime
---

import { Props } from "docz";
import {
  UserLevelC,
  UserOrganisationC
} from "./Interface.tsx";


# Interface

## Properties

### Type UserOrganisation

<Props of={UserOrganisationC} />

### Type UserLevel

<Props of={UserLevelC} />

具有这样定义的类型：

export const enum UserLevel {
  "employee",
  "owner",
  "admin",
  "disabled"
}

export interface UserOrganisation {
  level: UserLevel;
  name: string;
}

这样呈现（注意下面的“ UserLevel”类型只是呈现为水平线）：

作为参考，我们还尝试定义/导出以下方式：

export type foo = 'option1' | 'option2';
export enum foo = 'option1' | 'option2';
export const enum foo = 'option1' | 'option2';

如您所见，接口已呈现，但未呈现此类型/枚举等。

奇怪的是，如果将相同类型的枚举字符串/联合类型声明为接口的属性，而不是其自身的类型：

export interface UserOrganisation {
  level: 'employee' | 'owner' | 'admin' | 'disabled';
  name: string;
}

Docz可以在渲染界面时显示它，如下所示：

但是，当您尝试将其提取为自己的类型时（我们需要这样做，而其他接口在多个地方使用了它），就是什么都没有渲染。

任何帮助将不胜感激，谢谢！

Answer 1

由于level: 'employee' | 'owner' | 'admin' | 'disabled';有效，因此您可以将类型声明为：

type UserLevel = 'employee' | 'owner' | 'admin' | 'disabled';