在 React 打字稿中将状态设置为对象/大数据对象的动态数组答案

【问题标题】：Setting state to dynamic array of objects/large data object in React typescript在 React 打字稿中将状态设置为对象/大数据对象的动态数组
【发布时间】：2021-08-29 21:39:13
【问题描述】：

我是使用 React 和 typescript 的新手，最近遇到了以下问题。我的理解是，如果我将初始状态声明为一个空数组，如下所示：

const [todos, setTodos] = useState<{ id: string; text: string }[]>([])

我需要为 typescript 提供数组最终外观的接口。因此useState<{ id: string; text: string }[]>。我很好奇的是我从 api 等获取数据的用例，并且架构非常大或值是动态的。我该如何让打字稿知道我的空数组最终将设置为什么。如果我要获取一个非常大的对象数组，我觉得必须遍历并概述每个键值对似乎效率不高。或者如果数据是动态的，我怎么可能概述架构？

【问题讨论】：

如果我不知道整体形状怎么办，因为它是动态的，这就是我要问的
如果数据是动态的，那么您可以使用 any[] 或 Record<string, any>[] 之类的东西，或者您可以定义一个简化的类型或接口，只包含您知道始终存在并且您实际使用的属性.

标签： reactjs typescript react-typescript

【解决方案1】：

您可以为每个数组元素使用 `Record 类型

const [todos, setTodos] = useState<Array<Record<string, unknown>>>([])

【讨论】：

使用 Any 不是一个好主意。正如@apokryfos 所说，。对于未知的键和值，我们可以使用 Record 类型。
如果是这样的话，Record<string, any> 不是一个好主意，因为值类型是any？还有@apokryfos 建议any[] ...
是的，不好。理想的类型应该是Record<string, unknown>，因为我们不知道来自 API 的数据类型是什么。因此，如果我们使用unknown 而不是any，那么 TS 在使用这些值之前会给我们一个错误。例如，如果响应是[{key: 'string'}]，类型是any，那么我们可以直接使用state[0].key.toUpperCase()，但如果未知，我们必须先检查类型。这就是未知的安全性。
查看此答案了解更多详情：stackoverflow.com/a/51439876/7852473
我明白了。感谢您的链接。看来我还有很多关于 Typescript 的知识……