可选用 jsdoc、typescript checkjs (javascript) 反应 useState 类型答案

【问题标题】：optional react useState types with jsdoc, typescript checkjs (javascript)可选用 jsdoc、typescript checkjs (javascript) 反应 useState 类型
【发布时间】：2020-02-07 06:55:51
【问题描述】：

使用 typescript 的 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

【问题讨论】：

使用 undefined 代替 null：const [optional, setOptional] = useState()
我仍然希望将其限制为 {null|number} - 没有参数的 useState 会导致可选为 any
更新了更多关于此的上下文
目前不可能...有一个未解决的问题：github.com/microsoft/TypeScript/issues/27387

标签： javascript reactjs typescript jsdoc

【解决方案1】：

我认为您可以使用正确的联合类型定义一个初始值并将其传递给useState。

应该是这样的：

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

【讨论】：

【解决方案2】：

假设您的组件依赖于optional 状态的初始状态是null 值（而不是undefined），一种解决方案是将状态挂钩类型显式指定为两者的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 的初始 optional 状态值，那么以下方法将起作用：

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

// optional === undefined

setOptional(42);

【讨论】：

对不起，我的问题写得不好，我希望用 javascript 解决这个问题，而不是 typescript（我正在使用 typescript 的 checkjs 功能）