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

展示此代码的代码框：
https://codesandbox.io/s/optimistic-villani-kbudi?fontsize=14

Answer 1

假设您的组件依赖于optional值的null状态的初始状态（而不是undefined），一种解决方案是将状态挂钩类型显式指定为number和null的{{3}}就像这样：

// 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)

可选与jsdoc，typescript checkjs（javascript）一起使用useState类型

2 个答案: