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

Question

我正在尝试 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;

Answer 1

它会帮助：

    /**
     * @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 中这种文档方式的描述

Answer 2

在这里找到的实际最佳解决方案是使用括号。否则 jsdoc 似乎没有抓住它：

const [authFormInput, setAuthFormInput] = useState(/** @type {AuthFormInput} */({..}));

Answer 3

你可以试试这个：

/** @type {boolean} */
const initialState = false
const [isLoading, setIsLoading] = React.useState(initialState)