JSDoc（更好的文档）未正确显示所需的propType

Question

使用带有React应用程序的JSDocs的更好的文档插件。它旨在解析PropType，并从PropType获取信息，并将其放入数组中。确实如此。但在表中显示必需为'否'，即使当proType标记为是必需的。

https://github.com/SoftwareBrothers/better-docs#usage-2

https://softwarebrothers.github.io/admin-bro-dev/index.html

示例组件

/**
 * Some documented component
 *
 * @component
 * @example
 * const text = 'some example text'
 * return (
 *   <Documented text={text} />
 * )
 * @category Dumb component
 */

const Documented = (props) => {
    const { text } = props
    return (
        <div>{text}</div>
    )
}

Documented.propTypes = {
    /**
     * Text is a text
     */
    text: PropTypes.string.isRequired,
}

export default Documented

JSDoc配置

{
  "tags": {
    "allowUnknownTags": true,
    "dictionaries": ["jsdoc"]
  },
  "source": {
    "include": ["src"],
    "includePattern": ".+\\.js(doc|x)?$",
    "excludePattern": "(^|\\/|\\\\)_"
  },
  "plugins": [
    "plugins/markdown",
    "node_modules/better-docs/component",
    "node_modules/better-docs/category"
  ],
  "templates": {
    "better-docs": {
      "name": "My React components"
    }
  },
  "opts": {
    "destination": "docs",
    "encoding": "utf8",
    "recurse": true,
    "verbose": true,
    "readme": "README.md",
    "template": "node_modules/better-docs/"
  }
}

或者寻找一个JSDoc插件，该插件解析proptypes的注释，并指出组件所需的props。

谢谢！

Answer 1

您的IDE似乎不支持react-styleguidist。幸运的是，有另一种解决方案可以记录react组件，如下例所示。

import React from 'react';

/**
 * @typedef {object} Props
 * @prop {number} numberProp - A numeric example, this is required.
 * @prop {string} [className] - Optional, you can ignore this.
 *
 * @extends {React.Component<Props>}
 */
export default class SomeComponent extends Component {
  render() {
    // Instead of undefined,
    // className will be an empty string when not defined
    const className = this.props.className || "";
    return (
      <div className={className}>
        {this.props.numberProp}
      </div>
    );
  }
}

源代码：如何使用typescript jsdoc注释进行类型转换