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

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

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?

Solution

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.