如何为解构声明的变量添加注释以实现鼠标悬停显示描述

问题情况 #

给useState解构出来的state和setState加注释时，不管是单行//还是多行/** */，鼠标悬停只能看到变量类型，注释内容完全不生效：

// 注释不生效
/** 注释也不生效 */
const [state, setState] = useState(0)

但同样的注释方式给普通变量用就正常：

解决办法 #

想让解构变量的注释被编辑器识别，得换个写法，下面几种方法都能用：

1. 给每个解构变量单独加行内注释 #

把注释直接写在对应变量上方，换行解构即可：

const [
  /** 用来记录计数的状态值 */
  state, 
  /** 更新计数状态的函数，传入数字即可修改state */
  setState
] = useState(0)

2. 先定义带注释的类型，再给解构整体标注 #

用@typedef定义包含注释的类型，再给解构语句指定这个类型：

/**
 * @typedef {Object} CountState
 * @property {number} current - 当前的计数值
 * @property {(newVal: number) => void} update - 更新计数值的函数
 */

/** @type {CountState} */
const [state, setState] = useState(0)

3. 给useState的返回值加JSDoc注释 #

直接给useState调用的返回值标注带注释的类型，解构变量会自动继承注释：

/**
 * @returns {[
 *   number, // 当前计数的状态值
 *   (newVal: number) => void // 更新状态的函数
 * ]}
 */
const [state, setState] = useState(0)

用上面任意一种方法，VSCode这类支持JSDoc的编辑器就能正确显示注释内容了。

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