如何正确编写React Native组件Props参数的JSDoc文档

你当前的写法只在注释内定义了Props的typedef，但没有将该类型和组件函数的入参props做绑定，同时使用了JSDoc无法识别的callback类型，所以编辑器无法正确解析props类型，默认识别为any。

写法1：直接在组件注释内声明Props属性（无需单独定义类型） #

/**
 * 全屏模态框展示选中图片的JSX组件
 * @param {object} props 组件接收的属性对象
 * @param {boolean} props.modalVis 控制模态框显隐的状态布尔值
 * @param {(visible: boolean) => void} props.setModalVis 修改modalVis状态的回调函数
 * @param {string} props.imageUri 待展示图片的URI字符串
 * @returns {JSX.Element} 模态框组件元素
 */
const DisplayModal = (props) => {...}

写完后悬浮查看组件时，就能直接展示每个props属性的类型和说明。

写法2：单独定义可复用的Props类型 #

如果该Props类型需要在其他地方复用，可以单独定义typedef后再关联到组件入参：

/**
 * @typedef {object} DisplayModalProps
 * @property {boolean} modalVis 控制模态框显隐的状态布尔值
 * @property {(visible: boolean) => void} setModalVis 修改modalVis状态的回调函数
 * @property {string} imageUri 待展示图片的URI字符串
 */

/**
 * 全屏模态框展示选中图片的JSX组件
 * @param {DisplayModalProps} props 组件接收的属性对象
 * @returns {JSX.Element} 模态框组件元素
 */
const DisplayModal = (props) => {...}

注意事项 #

• 不要使用callback作为类型值，需要明确标注函数的签名格式，示例中(visible: boolean) => void表示该函数接收一个布尔类型的参数，无返回值，你可以根据实际业务调整参数和返回值类型
• 必须通过@param {类型名} props的形式，将定义好的属性类型和组件入参做关联，编辑器才能正确识别
• 如果你习惯在组件入参时直接解构属性，可以用如下写法，也能正常识别：

const DisplayModal = (/** @type {DisplayModalProps} */ { modalVis, setModalVis, imageUri }) => {...}

内容的提问来源于stack exchange，提问作者Garnif