如何输入 React.useState() ，它可以使用 Typescript 获取多种类型作为其值

Question

我正在尝试输入 useState() 挂钩，它可以获取数字和字符串类型作为其值。

export interface Select {
  selectValue: React.Dispatch<React.SetStateAction<number | string>>;
  ...
}

我正在尝试像这样使用上面的组件，

const [value, setValue] = React.useState(0);
<Select selectValue = {setValue} />

但它给了我这个错误。

Type 'Dispatch<SetStateAction<number>>' is not assignable to type 'Dispatch<SetStateAction<string | number>>'.
  Type 'SetStateAction<string | number>' is not assignable to type 'SetStateAction<number>'.
    Type 'string' is not assignable to type 'SetStateAction<number>'.

我该如何解决这个错误？

Answer 1

您只需要提供一个通用类型参数即可useState<T>：

const [value, setValue] = useState<string | number>(0);

0否则，它将根据您的初始值（仅 ）推断类型number。这是一个完整的示例：

TS 游乐场链接

import {
  default as React,
  Dispatch,
  ReactElement,
  SetStateAction,
  useState,
} from 'react';

interface SelectProps {
  selectValue: string | number;
  setSelectValue: Dispatch<SetStateAction<string | number>>;
}

declare function Select (props: SelectProps): ReactElement;

function Example (): ReactElement {
  const [value, setValue] = useState<string | number>(0);
  return <Select selectValue={value} setSelectValue={setValue} />;
}