In JsDoc 3, what's the proper way to annotate a returned object?

Question

I'm using JSDoc 3.6.4 with my React project. I've defined the following hook ...

import { useState } from "react";

/**
 * The form hook.  Sets handlers and initial properties of a form. 
 *
 * @param {Object.<string, string>} initialValue
 * @returns {object}
 */
const useForm = (initialValue = {}) => {
  const [values, setValues] = useState(initialValue);

  const reset = () => {
    setValues(initialValue);
  };

  const handleChange = ({ target }) => {
    setValues((values) => ({
      ...values,
      [target.name]: target.value,
    }));
  };

  return {
    handleChange,
    values,
    reset,
    setValues,
  };
};

export default useForm;

What's the proper way to document what is returned when there are multiple things returned? I would like to put more than {object}, which is what I have now.

Answer 1

You can use a @typedef annotation.

As you can see in the screencast:

• VS Code can tell that bar returns Foo
• When you mouse over @return {Foo}, VS Code can show its shape