如何在TypeScript+React项目中给useState设置指定类型的对象初始值？

错误原因 #

1. 你定义的TAssetsOverview类型下4个属性均为必选属性，传入空对象{}作为useState初始值时，缺少全部必选属性，不符合类型约束，触发第一个报错。
2. 第二种写法使用了对象属性简写语法{ totalAssets }，该语法的前提是当前作用域下存在已经定义好的同名变量totalAssets，你没有提前定义这些变量，因此触发变量未定义的报错。

解决方案 #

方案1：设置完整初始值（最推荐，符合类型安全规范）

直接给每个属性赋予符合类型的初始值，数值类属性默认设为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
    })
    // 后续获取到真实数据后调用setOverview覆盖即可
    return (
        <div>
            {/* 注意原代码中assets变量未定义，这里应该是overview？ */}
            <AssetsList assets={overview} />
        </div>
    )
}

方案2：初始无值，后续才会赋值的场景

如果你的初始状态确实是空，要等接口返回数据后才会赋值，可以调整类型允许属性可选：

// 将属性设为可选
type TAssetsOverview = {
    totalAssets?: number,
    assetsInOperation?: number,
    assetsInAlert?: number,
    assetsInDowntime?: number
}

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

也可以给泛型增加联合类型，允许state初始为null，后续使用时做非空判断即可：

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

内容的提问来源于stack exchange，提问作者Berg_Durden