如何使用 JSDoc 记录 useState 挂钩？

Question

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

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

这里，referenceState是 Object 类型，并且setReferenceState需要一个 Object。

根据网上的一些信息，我正在尝试做一些事情：

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

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

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

Answer 1

在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 2

最短的方法是这样的：通过添加模板

/**
 * @type {[MyType, React.Dispatch<MyType>]} state
 */
const [value, setValue] = useState(null);

我还在 js 项目中使用 *.d.ts 文件。VS code 可以看到并使用它们，以便您可以以现代方式描述类型和接口。

只需放一条线

type useState<T> = [T, React.Dispatch<T>];

到 useState.d.ts 文件，然后在 JS 文件中使用

/** @type {useState<MyType>} */
const [value, setValue] = useState(null);

Answer 3

我认为你可以尝试这种方法：

/**
 * @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返回任何特殊的内容（即 ）——如果这就是 setter 返回的内容。有些项目只会删除@returnsif it only returns undefined，但我喜欢添加它以显示返回值是已知的，undefined而不仅仅是未记录的。