optional react useState types with jsdoc, typescript checkjs (javascript)

Question

using typescript's jsdoc support to type the following javascript code:

const [optionalNumber, setOptionalNumber] = useState(null)

const handleClick = () => {
  setOptionalNumber(42) 
  //          ^-- Argument of type '42' is not assignable to parameter of type 'SetStateAction<null>'
}

the way i currently get around this works but is a bit ugly:

const [optional, setOptional] = useState(
  /** @type {number|null} */ (null)
)

how can i accomplish this without using casting? i want optional to have a type of null | number, and setOptional to only accept null | number as an argument.

codesandbox demonstrating this:
https://codesandbox.io/s/optimistic-villani-kbudi?fontsize=14

Answer 1

I think you can define an initial value with the correct union type and pass it to useState.

It would be something like this:

/**
* @type {number | null}
*/
const initValue = 42;
const [optionalNumber, setOptionalNumber] = useState(initValue)