可选反应 useState 类型与 jsdoc、typescript checkjs (javascript)

Question

使用 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作为参数。

代码和盒子展示了这一点：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);

Answer 2

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

它会是这样的：

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