如何使用 Typescript 和 useState 将类型对象设置为 React 的初始值？

Question

我刚开始学习使用 Typescript 构建 React 应用程序，我真的卡在了这一点上。

我将 type 设置为状态模型，但出现此错误：

这就是我正在做的事情：

type TAssetsOverview = {
    totalAssets: number,
    assetsInOperation: number,
    assetsInAlert: number,
    assetsInDowntime: number
}

const AssetsOverview: React.FC = () => {
    const [overview, setOverview] = React.useState<TAssetsOverview>({})
    return (
        <div>
            <AssetsList assets={assets} />
        </div>
    )
}

export default AssetsOverview

我想做的是根据type TAssetsOverview.

将overview设置为对象

我尝试在对象内设置值，如下所示：

const [overview, setOverview] = React.useState<TAssetsOverview>({
        totalAssets, 
        assetsInOperation, 
        assetsInAlert, 
        assetsInDowntime
    })

但是我得到这个错误：

如果我删除 type TAssetsOverview 并设置 useState<{}>({}) 它工作正常，但我想这不是应该的方式。

从我的角度来看，它看起来与我阅读的所有教程和文章完全一样，但由于我是新手，我看不出这里缺少什么。

我该如何设置？

Answer 1

您需要一个默认值，该值必须对应于 TAssetsOverview:

在您的情况下，由于变量是数字，您可以将其默认设置为 0 如果这有助于您的事业。

type TAssetsOverview = {
    totalAssets: number,
    assetsInOperation: number,
    assetsInAlert: number,
    assetsInDowntime: number
}

const AssetsOverview: React.FC = () => {
    const [overview, setOverview] = React.useState<TAssetsOverview>({
    totalAssets: 0,
    assetsInOperation: 0,
    assetsInAlert: 0,
    assetsInDowntime: 0
})
    return (
        <div>
            <AssetsList assets={assets} />
        </div>
    )
}

export default AssetsOverview

Answer 2

问题是{}和TAssetsOverview的类型不一样

在 TAssetsOverview 中，所有属性都是必需的（要创建该类型的对象，所有属性都必须存在）而在 {} 中，您不会传递任何属性。

您不必向 useState 传递任何参数，您可以将状态初始化为 undefined:

const [overview, setOverview] = React.useState<TAssetsOverview>();

然而，如果你想用 {} 初始化状态，可能你的类型定义是错误的并且 TAssetsOverview 中的所有属性都是可选的（注意 ?）：

type TAssetsOverview = {
    totalAssets?: number,
    assetsInOperation?: number,
    assetsInAlert?: number,
    assetsInDowntime?: number
}

...

const [overview, setOverview] = React.useState<TAssetsOverview>({});

如何使用 Typescript 和 useState 将类型对象设置为 React 的初始值？

How to set a type object as initial value of React using Typescript and useState?

typescript

reactjs

typescript-generics

react-typescript