使用带有打字稿的地图时解构大对象答案

【问题标题】：destructuring of large objects when using map with typescript使用带有打字稿的地图时解构大对象
【发布时间】：2021-08-26 18:11:21
【问题描述】：

我对 typeScript 还比较陌生，并且在我处理来自 GraphQL 端点的各种数据的项目中，我在注释方面遇到了很多困难。

数据结构稍后可能会更改，因此我使用 Apollo Client 为各种查询生成适当的 TypeScript 类型，以避免手动输入它们。这很好用：到目前为止一切都很好！

但是，当我想映射各种数据时，我遇到了困难：主要是当我使用 map() 函数并开始解构数据时，我很难找到有关如何执行此操作的示例？我不确定我是否遇到名称冲突？我不清楚各种错误。

示例：（这是一个更大代码块的 sn-p - 如果我将鼠标悬停在 seoDataObject 上，我可以看到它按预期正确注释 - 它是一个对象数组：

const seoDataObject: (AllUsersSeo_users_edges | null)[] |空 |未定义）


interface AllUsersSeo_users_edges {
  __typename: "RootQueryToUserConnectionEdge";
  /**
   * The item at the end of the edge
   */
  node: AllUsersSeo_users_edges_node | null;
}

const seo = seoDataObject?.map(({ node }) => node).find((node) => node.id === id)?.seo;

然后我得到以下错误：

var node: any
Property 'node' does not exist on type 'AllUsersSeo_users_edges | null'.ts(2339)

我将如何使用 typescript 重写它？

'node' 确实存在于每个 seoDataObject 上 - 但在代码 sn-p 'node' 也是 map 函数中的一个参数，所以我根本无法理解如何在 Typescript 中正确执行此操作？

【问题讨论】：

我对这个做了很大的限制——它实际上只是一件小事。归结为 ApolloClient 提供的注释：``` 边：(AllUsers_users_edges | null)[] |空值; ``` 如果我手动更改此定义并删除“或空”注释，则错误消失：``` 边缘：（AllUsers_users_edges）[] |空值; ``` 但是我怎样才能重写它来排除空值呢？这里可以使用条件运算符吗？ ``` const seo = seoDataObject?.map(({ node? }) => node).find((node) => node.id === id)?.seo; ``` 我知道这是错误的（节点？） - 但不确定是否正确？

标签： typescript graphql apollo-client

【解决方案1】：

我不太能理解你真正要问的问题，你只是想通过 id 找到 seo，它可能在结果中，可能是一个空值数组，或者 null 本身?

在那种情况下const seo = seoDataObject?.filter(x => x.node).find(x => x.node.id === id)?.node.seo;

【讨论】：

是的，我真的很抱歉这太乱了！当 Apollo-Client 提供注解时，它们都有这个“或 null”注解（|null）。我将从 Apollo 客户端重新下载新的 JSON 对象，因此无法手动编辑注释。在处理对象时，我通常只使用可选链接 (.?) 来解决这个问题 - 但在使用 map() 时会遇到这个问题。但也许 filter() 是解决这个问题的方法——到目前为止我还没有想到——我会试一试，看看结果如何！
Andreas，我用你的解决方案稍作修改：``` const seo = seoDataObject.filter(x => x?.node).find(x => x?.node?.id == = id)?.node?.seo; ``` 但是在少数情况下我不得不求助于非空断言运算符（！）来告诉打字稿数据不是空的或未定义的。如果数据为空或未定义，代码会在前几行抛出错误。我将编写一些测试来检查 GraphQL 数据是否也存在。我在上一行做了一个例子：``` const seoDataObject = seoData?.data?.users?.edges!; ```感谢安德烈亚斯的帮助！