可选地将useState类型与jsdoc，打字稿checkjs（javascript）

Question

使用打字稿的jsdoc支持来键入以下javascript代码：

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），一种解决方案是将状态挂钩类型明确指定为两个[ C0]和union type像这样：

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