Docz: Как визуализировать определения Typescript, кроме интерфейсов, в качестве реквизита - PullRequest
Новая
       9

Docz: Как визуализировать определения Typescript, кроме интерфейсов, в качестве реквизита

0 голосов
/ 09 июня 2019

Мы находимся в процессе документирования наших определений типов с помощью 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 ниже, который отображается как горизонтальная линия):

enter image description here

Для справки мы также попытались определить / экспортировать следующие способы: 

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

Как видите, интерфейсы отображаются, но не для этого типа / enum и т. Д.

Что странно, если такой же тип перечислимой строки / типа объединения объявляется как свойство интерфейса, а не как его собственный тип: 

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

Docz может отображать его при рендеринге интерфейса следующим образом:

enter image description here

Однако, когда вы пытаетесь извлечь его в его собственный тип (который нам нужен, поскольку этот и некоторые другие используются во многих местах другими интерфейсами), это когда ничто не рендерится.

Любая помощь будет принята с благодарностью, спасибо!

1 Ответ

0 голосов
/ 09 июня 2019

Так как level: 'employee' | 'owner' | 'admin' | 'disabled'; работает, вы можете объявить тип так: 

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