如何使用JSDoc描述export default ({ Label, initialValue })=>{ ... }默认导出函数

嘿，这个问题我太熟悉了！针对这种以默认导出形式存在的解构参数箭头函数，用JSDoc其实有好几种清晰的写法，我给你拆解一下：

这是最直接的写法，先完整描述函数的参数、返回值，最后用@default标记它是模块的默认导出：

/**
 * 自定义输入组件，用于渲染带标签的输入框
 * @param {Object} props - 组件的属性集合
 * @param {string} props.Label - 输入框的标签文本
 * @param {string|number} props.initialValue - 输入框的初始值
 * @returns {JSX.Element} 渲染完成的输入组件JSX
 * @default
 */
export default ({ Label, initialValue }) => {
  // 组件逻辑实现
  return (
    <div className="input-group">
      <label>{Label}</label>
      <input defaultValue={initialValue} />
    </div>
  );
};

这种写法的优势是不需要额外修改函数结构，IDE（比如VS Code）能直接识别默认导出的类型提示，非常适合快速标注。

如果想要让函数本身有更清晰的标识，可以先给箭头函数起个语义化的名字，再给这个命名函数加JSDoc，最后导出默认：

/**
 * 自定义输入组件，用于渲染带标签的输入框
 * @param {Object} props - 组件的属性集合
 * @param {string} props.Label - 输入框的标签文本
 * @param {string|number} props.initialValue - 输入框的初始值
 * @returns {JSX.Element} 渲染完成的输入组件JSX
 */
const LabeledInput = ({ Label, initialValue }) => {
  // 组件逻辑实现
  return (
    <div className="input-group">
      <label>{Label}</label>
      <input defaultValue={initialValue} />
    </div>
  );
};

export default LabeledInput;

这种方式在大型项目里更友好，团队成员看代码时能一眼通过函数名理解组件用途，JSDoc和函数的绑定也更明确。

如果你的组件props字段较多，或者需要在其他地方复用这个props类型，推荐先通过@typedef定义属性结构，再在函数参数里引用：

/**
 * 带标签输入组件的属性类型定义
 * @typedef {Object} LabeledInputProps
 * @property {string} Label - 输入框的标签文本
 * @property {string|number} initialValue - 输入框的初始值
 */

/**
 * 自定义输入组件，用于渲染带标签的输入框
 * @param {LabeledInputProps} props - 组件的属性集合
 * @returns {JSX.Element} 渲染完成的输入组件JSX
 * @default
 */
export default ({ Label, initialValue }) => {
  // 组件逻辑实现
  return (
    <div className="input-group">
      <label>{Label}</label>
      <input defaultValue={initialValue} />
    </div>
  );
};

这种写法能大幅提升代码的可维护性，当props结构需要修改时，只需要更新@typedef部分即可，所有引用这个类型的地方都会同步得到提示更新。

小提示 #

• 如果是在TypeScript项目中结合JSDoc，还可以用@type进一步强化类型约束，但纯JavaScript环境下上面的三种方法完全够用。
• 记得尽量让JSDoc的描述语义化，不仅要标注类型，也要说明参数的用途，这样其他开发者看代码时能更快上手。

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