在 TypeScript 中使用 useState 钩子

Question

我想知道是否可以在设置 useState 类型时使用继承。我的意思是如果有这样的界面：

interface PackageItem {
    id: number,
    name: string,
    address: string
}

还有一个类似的界面

interface Selectable {
    selected: boolean
}

现在我想创建一个状态，在该状态下我将拥有一系列可选择的包，所以我尝试了这样的事情：

const [selectablePackages, setSelectablePackages] = useState<(PackageItem extends Selectable)[]>();

但我一直收到错误，它突出显示了扩展词，说：

Parsing error: Unexpected token, expected ","

我没有正确设置状态类型，我该如何实现？

Answer 1

您打算创建一个可以使用 &、the intersection operator

完成的内联类型

const [selectablePackages, setSelectablePackages] = 
    useState<(PackageItem & Selectable)[]>();

如果需要在多个地方使用某个类型或接口，请考虑使用它。

type SelectablePackageItem = PackageItem & Selectable

// Or interface
interface SelectablePackageItem extends PackageItem, Selectable {}

const [selectablePackages, setSelectablePackages] = 
    useState<SelectablePackageItem[]>();

在 TypeScript 中使用 useState 钩子

Using useState hook with TypeScript

typescript

react-native

use-state