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;

Did you post all the relevant code? I don't see any reference to JSDoc or a destructured array. — Chris B., Sep 18 '19 at 00:07
@RutherfordWonkington JSDoc is indeed the comment block above the single line of code. The destructured array is in `const [isLoading, setIsLoading]`. — shinglesmingles, Sep 18 '19 at 01:24
so you want to JSDoc local variable, am I right? if yes, what's the need? — skyboyer, Sep 19 '19 at 08:26
@skyboyer mainly to document the component state so that the reference to it can be brought up later when it's used. — shinglesmingles, Sep 19 '19 at 08:53

score 19 · Answer 1 · answered Sep 25 '19 at 20:17

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

score 4 · Answer 2 · edited Apr 08 '21 at 20:26

4

You can try this:

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

edited Apr 08 '21 at 20:26

Community

1
1

answered Dec 29 '20 at 06:15

Yang Liu

41
1

this is better because typescript would infer the type of isLoading and setIsLoading by itself +1. setIsLoading is more complex than `Function`, it is `React.Dispatch>` – Daniel Pérez Jan 28 '21 at 23:54

React Hooks - JSDoc with destructured array variables

2 Answers2