使用 TypeDoc 的文档接口

Question

I'm using TypeDoc to document my TypeScript code just like that:

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

Problem is that I use React functional components like that:

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

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

So you can use it like:

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

But with this structure I'm not able to document the props of Application in details. Best I can do is this:

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

I tried using this type of notation but it's not supported:

/**
 * @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) => {
  ...

So my last chance is to document the interface directly. My question is: Is there a way to write TypeDoc for each attributes of an interface? Maybe something similar to that:

/**
 * @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
}

Have you any idea how it can be implemented?

Answer 1

You can add type annotations to interfaces similar to how you would for classes.

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

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

The @typeparam option is also available for describing generic types however I'm not sure it supports the Props.useLocalStorage syntax.

/**
 * @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;