опционально реагирует useState типы с jsdoc, typcript checkjs (javascript)

Question

используя поддержку jsdoc машинописного текста для ввода следующего javascript code:

const [optionalNumber, setOptionalNumber] = useState(null)

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

способ, которым я сейчас обхожусь, работает, но немного уродливо:

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

как я могу сделать это без использования кастинга? я хочу, чтобы optional имел тип null | number, а setOptional мог принимать только null | number в качестве аргумента.

codesandbox, демонстрирующий это:
https://codesandbox.io/s/optimistic-villani-kbudi?fontsize=14

Answer 1

Предполагая, что ваш компонент зависит от начального состояния состояния optional, являющегося значением null (а не undefined), одним из решений было бы явное указание типа перехватчиков состояний как типа объединения как number, так и null примерно так:

// Allows initial value to be null, and number to be subsequently set 
const [optional, setOptional] = useState<number | null>(null);

// optional === null

setOptional(42);

В качестве альтернативы, если ваш компонент не имеет расстояния между undefined или null для начального значения состояния optional, тогдаследующее будет работать:

const [optional, setOptional] = useState<number>();

// optional === undefined

setOptional(42);