可选的 React 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 作为参数。

codesandbox 演示了这一点：
https://codesandbox.io/s/optimistic-villani-kbudi?fontsize=14

Answer 1

假设您的组件依赖于 optional 状态的初始状态为 null 值（而不是 undefined），一种解决方案是显式指定状态挂钩像这样输入 number 和 null 的 union type：

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

// optional === null

setOptional(42);

或者，如果您的组件不区分初始 optional 状态值的 undefined 或 null，则以下方法可行：

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

// optional === undefined

setOptional(42);

Answer 2

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

会是这样的：

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

可选的 React useState 类型与 jsdoc、typescript checkjs (javascript)

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

javascript

jsdoc

typescript

reactjs