我如何使用 JSDoc 记录 useState 挂钩？

Question

我正在尝试使用 JSDoc 来记录我的反应状态挂钩的解构部分，例如：

const [referenceState, setReferenceState] = useState(null);

这里，referenceState是对象类型，setReferenceState需要一个对象。

根据网上的一些信息，我正在尝试按照以下方式做一些事情：

/**
* @param {Object} stateToSet
* @returns {GenericArray} current state and function to change value
*/
const [referenceState, setReferenceState] = useState(null);

但这不会产生任何东西..

有人可以帮我记录 referenceState 和 setReferenceState 吗？

Answer 1

我想你可以试试这个方法：

/**
 * @typedef {Object} ReferenceState
 */

/**
 * @callback ReferenceStateSetter
 * @param {ReferenceState} state
 * @returns {void}
 */

/**
 * @namespace {Object}
 * @property {ReferenceState} 0
 * @property {ReferenceStateSetter} 1 
 */
const [referenceState, setReferenceState] = useState(null);

或者，为了避免必须记录立即解构的数组，但受益于在末尾添加一些缩进更改：

/**
 * @typedef {Object} ReferenceState
 */

/**
 * @callback ReferenceStateSetter
 * @param {ReferenceState} state
 * @returns {void}
 */

const [
    /**
     * @type {ReferenceState}
     */
    referenceState,

    /**
     * @type {ReferenceStateSetter}
     */
    setReferenceState
] = useState(null);

如果你不想拥有 ReferenceState 的文档，你可以去掉它的 @typedef 并用 Object 替换对它的引用，但我认为这样更清楚有文档。

上面的

void 是一个更简单的方法来说明没什么特别的（即 undefined）是 returned——如果那是 setter returns。如果 @returns 只有 returns undefined，有些项目会删除它，但我想添加它以显示 return 值已知为 undefined不仅没有记录。

Answer 2

在webstorm中，可以这样写（其他编辑器我没测试过）：

const [state, setState] = useState(/** @type {{name: string, age: number?}} */null)

或

/**
 * @typedef People
 * @property {string} name
 * @property {number} [age]
 */

//........

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

Answer 3

作为替代方案，可以在解构之前声明变量，并像往常一样使用 JSDoc 进行注释。

/**
* Current state.
* @type {Object}
*/
let referenceState;
/**
* Current state setter.
* @type {Function}
* @param {any} state updated state value.
* @returns void
*/
let setReferenceState;
[referenceState, setReferenceState] = useState(null);

我如何使用 JSDoc 记录 useState 挂钩？

How do I document useState hooks with JSDoc?

javascript

jsdoc