Type React Hooks using TypeScript

Share this video with your friends

Previously, I added some type information for the utility function we are going to look at. By clicking on the function, a lightbulb appears. We can click that and select Annotate everything with types from JSDoc. Thanks to our plugin, it will type our function for us. It's not always perfect so double check to make sure it's exactly as you would like.

Along with the utility function, we are going to look at how to type a useMemo hook, a useCallback hook, a useRef hook, a useState hook, and a custom hook.

Garrett

~ 3 years ago

hit a roadblock with the "Annotate everything with types from JSDoc". I don't see the option.

Chance Strickland(instructor)

~ 3 years ago

Hey Garrett, great feedback! Gonna re-post your Twitter message in case anyone else hits this:

Check your VS Code settings: If you see:

"typescript.validate.enable": false

Set that to true and you should be good!

lolgrifon

~ a year ago

If a '?' is added to the JSDoc param that we want to be optional before the types annotation for "mines" will match like this:

/**
 * @param {{
 *   rows: number;
 *   columns: number;
 *   mines?: number;
 * }} board
 * @param {number[]} [mines]
 * @returns {Cell[]}
 */

~ a year ago

"typescript.validate.enable": false

this setting did not work. hit a roadblock with the "Annotate everything with types from JSDoc". I don't see the option.