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 28 · 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 7 · Answer 2 · edited Apr 08 '21 at 20:26

7

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

101
1
2

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
Note that this only work if there is one type that the variable can hold - meaning that if you wanted a nullable value for example, it will infer only a partial type (even if you specific the type for the variable). Kind of annoying to be honest... – Moshe Jonathan Gordon Radian Sep 24 '21 at 08:38

score 6 · Answer 3 · answered Nov 03 '21 at 07:36

6

The actual best solution to be found here is by using parentheses. Otherwise jsdoc does not seem to catch it:

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

answered Nov 03 '21 at 07:36

androidavid

1,258
1
11
20

this is the simplest and the best solution – leftysauce Feb 05 '23 at 09:14

score 0 · Answer 4 · answered Jan 19 '22 at 14:55

The cleanest way I found is to use types.d.ts, since we're likely gonna need to type out more than just a useState and we can keep a lot of the code there for cleanliness:

// types.d.ts:
declare type State = string;
declare type SetState = (stateParam: State) => void;
declare type UseState = [State, SetState];

// component.jsx:
  /**
   * @type {UseState}
  */
  const [state, setstate] = useState("");

React Hooks - JSDoc with destructured array variables

4 Answers4