reactjs - Dokumentera gränssnitt med TypeDoc

Jag använder TypeDoc för att dokumentera min TypeScript-kod precis så här:

/**
 * @param timestampValue Date in timestamp format
 */
const getDaysInTimestamp = (timestampValue: number): number => {
  return Math.round(timestampValue / 1000)
}

Problemet är att jag använder React-funktionella komponenter på det här sättet:

interface Props {
  useLocalStorage?: boolean
  useCookies?: boolean
}

const Application: React.FunctionComponent<Props> = (props) => {
  return (
    <>
      ...
    </>
  )
}

Så att du kan använda det så här:

<Application useLocalStorage useCookies >
  ...
</Application>

Men med denna struktur kan jag inte dokumentera props för Application i detalj. Det bästa jag kan göra är detta:

/**
 * @param props Props from Application component
 */
const Application: React.FunctionComponent<Props> = (props) => {
  ...

Jag försökte använda den här typen av notation men den stöds inte:

/**
 * @param props.useLocalStorage Enable the component to store some data in the localStorage
 * @param props.useCookies Enable the component to store and read cookies
 */
const Application: React.FunctionComponent<Props> = (props) => {
  ...

Så min sista chans är att dokumentera gränssnittet direkt. Min fråga är: Finns det ett sätt att skriva TypeDoc för varje attribut av ett gränssnitt? Kanske något liknande det:

/**
 * @param useLocalStorage Enable the component to store some data in the localStorage
 * @param useCookies Enable the component to store and read cookies
 */
interface Props {
  useLocalStorage?: boolean
  useCookies?: boolean
}

Har du någon aning om hur det kan implementeras?

Svar #1

Du kan lägga till typanteckningar till gränssnitt på samma sätt som du skulle göra för klasser.

interface Props {
  /** Enable the component to store some data in the localStorage */
  useLocalStorage?: boolean

  /** Enable the component to store and read cookies */
  useCookies?: boolean
}

Alternativet @typeparam är också tillgängligt för att beskriva generiska typer, men jag är inte säker på om det stöder syntaxen Props.useLocalStorage.

/**
 * @typeParam T  Comment for type `T`.
 * You may also use the template tag.
 * @template T comment for type `T`.
 */
function doSomething<T>(target: T, text: string): number;

Relaterade artiklar