将 useState 钩子与 TypeScript 一起使用答案

【问题标题】：Using useState hook with TypeScript将 useState 钩子与 TypeScript 一起使用
【发布时间】：2021-08-10 17:43:22
【问题描述】：

我想知道在设置 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 ","

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

【问题讨论】：

const [selectablePackages, setSelectablePackages] = useState<PackageItem[]>(); 无需指定扩展的内容。希望错误消息将您指向导致语法错误的字符？
@JuanMendes，但我也拥有selected 属性。我一般不想添加到PackageItem。我希望它只能在当前组件中选择。
那么你的意思是使用&。 <PackageItem & Selectable)[]>。考虑创建一个单独的类型。type SelectablePackageItem = PackageItem & Selectable
考虑更新您的问题的标题，因为它与useState 无关。如果他们有类似的问题，这将帮助其他人找到这个。可能是这样的：“将类型与 TypeScript 结合起来”。我可能应该将您的问题标记为 stackoverflow.com/questions/66566121/… 的欺骗
这能回答你的问题吗？ How to combine the types into one type using typescript and react?

标签： typescript react-native use-state

【解决方案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[]>();

【讨论】：