时间戳

首页 > 解决方案 > React Hooks - 具有解构数组变量的 JSDoc

reactjs - React Hooks - 具有解构数组变量的 JSDoc

问题描述

我正在尝试 JSDoc 一个带有钩子的简单 React Typescript 组件。不幸的是，我似乎找不到使 JSDoc 与声明的解构数组一起工作的方法。有一些与解构对象参数相关的 答案，但这些不适用于数组。

/**
 * @property {boolean} 0 - documentation for isLoading
 * @property {func} 1 - documentation for setIsLoading
 */
 const [isLoading, setIsLoading] = React.useState<boolean>(false);

更新 1：仍然无法找到记录这种解构的方法。有一个极端情况，如果我自定义类型一个对象，它可以工作：

export type AuthFormInput = {
  /** Value of the Email input field */
  email: string;
  /** Value of the Password input field */
  password: string;
};

const [form, setForm] = React.useState<AuthFormInput>({
  email: '',
  password: ''
});

...

// JSDoc will work here
const email = form.email;

标签： reactjstypescriptjsdoc3

解决方案

这会有所帮助：

    /**
     * @typedef {Boolean} LoadingState — documentation for isLoading
     * @description Additional doc
     */
    /**
     * @typedef {Function} LoadingStateSetter — documentation for setIsLoading
     */
    /**
     * @type {[LoadingState, LoadingStateSetter]} Loading
     */
    const [isLoading, setIsLoading] = React.useState();

在这个例子中，我们声明了两个额外的类型：LoadingState和LoadingStateSetter。然后我们为它们添加一些描述，最后，我们声明Loading结果的类型React.useState()

您也可以像这样以更简单的方式声明它：

    /**
      * @type {[Boolean, Function]} Loading
      */
    const [isLoading, setIsLoading] = React.useState();

但是在这种情况下，我没有找到添加描述的方法。

我已经在 VSCode 中检查了这种文档方式的描述

推荐阅读