What is the proper format for typing React props in TSDoc?

Question

I'm trying to apply the TSDoc standard for comments to a React project written in Typescript (with an eye towards generating documentation with Typedoc), but can't find any definitive answers for the preferred way to annotate a React props object. I've got this so far, where MyProps is an interface:

/**
 * Description of my function component
 * @param props - React props
 */
export default function MyComponent(props: MyProps) { ...

Is there a preferred method?

Answer 1

You want to document the props interface, and not the component itself. Which means this is the same as documenting fields of an interface.

import React from 'react'

interface FooProps {
  /** Testing 123 */
  foo: string
}

function Foo({foo}: FooProps) {
  return <>{foo}</>
}

<Foo foo="bar" />

When you hover over foo= on the last line, you should see the documentation.

Playground example.