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

【问题标题】：How to set a type object as initial value of React using Typescript and useState?如何使用 Typescript 和 useState 将类型对象设置为 React 的初始值？
【发布时间】：2021-11-03 19:23:55
【问题描述】：

我刚开始学习使用 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

我要做的是将overview设置为基于type TAssetsOverview的对象。

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

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

但我收到此错误：

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

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

我应该如何设置？

【问题讨论】：

您是否尝试过使默认值实际上对应于类型？或者，如果您没有合理的默认值，请将其初始化为未定义。
您的字段是可选的吗，因为您的对象具有不同的结构：{} 不是有效值
@jonrsharpe 你是什么意思？喜欢在对象中设置属性？我做到了，但我知道这些值在范围内没有区别。
好的，那么在新版本中，您认为这些值是从哪里来的？这甚至不是打字稿问题，只是基本的 JS - 错误消息再次告诉你它到底是什么。
阅读后您到底有什么不明白的地方？你研究过这个消息吗？你查过什么是速记属性吗？您认为这些价值观从何而来？实际上，如果您不了解基本的 JS，那么在其之上堆砌 TS 和 React 将是一场斗争。

标签： reactjs typescript typescript-generics react-typescript

【解决方案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

【讨论】：

它有效，谢谢。我应该总是像这样初始化值吗？
是的，我也编辑了答案，请看一下。 :)
@Berg_Durden 如果这回答了您的问题，请将其标记为您的答案。
我会这样做的。但我得等几分钟。
@Berg_Durden Ok 没问题，在那之前你可以看到typescriptlang.org/docs/handbook/interfaces.html 来更好地理解打字稿。

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

【讨论】：