如何使用 JSDocs 注释 ReactJS 状态完整的“类”组件道具答案

【问题标题】：How to annotate ReactJS State-full "class" Component props using JSDocs如何使用 JSDocs 注释 ReactJS 状态完整的“类”组件道具
【发布时间】：2020-06-01 01:58:08
【问题描述】：

如何在状态完整的“类”ReactJS 组件中注释道具以便在render() 中自动完成？但是我尝试了以下方法，但没有成功：

  export default class MyComponent extends Component {

  /**
   * @param {object} props
   * @param {object} props.survey
   * @param {string} props.survey.name
   */
  constructor(props){
    super(props)
    // autocompletion works here
 }

  render() {
    // autocompletion does not work here

    return (
     console.log(this.props.survey.name)
    );
  }
}

【问题讨论】：

标签： javascript reactjs jsdoc

【解决方案1】：

  /**
   * @typedef {object} props
   * @property {object} survey
   * @property {string} survey.name
   * @extends {Component<props>}
   */
  export default class MyComponent extends Component {

  constructor(props){
    super(props)
    // autocompletion works here
 }

  render() {
    // autocompletion should work here
    const {survey} = this.props;
    return (
     console.log(survey.name)
    );
  }
}

【讨论】：

按照这个方法，如果我需要对其中的道具做一些事情，我需要将@param {props} props添加到构造函数中。