React Hooks - JSDoc with destructured array variables

Question

I'm trying to JSDoc a simple React Typescript component with hooks. Unfortunately, I can't seem to find a way that makes JSDoc work with declared destructured arrays. There are some answers related to destructuring object params, but these don't work for arrays.

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

Update 1: Still having trouble finding a way to document this destructure. There is a corner case where if I custom type an object, it works:

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

It would help:

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

In this example we declare two additional types: LoadingState and LoadingStateSetter. Then we add some description for them and finally, we declare the Loading type for the result of React.useState()

You also can declare it in a more simple way like this:

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

But I didn't find a way to add a description in this case.

I've checked the description of such way of documentation in VSCode

Answer 2

You can try this:

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