时间戳

首页 > 解决方案 > 使用带有打字稿的地图时解构大对象

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

问题描述

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

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

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

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

常量 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)

我将如何使用打字稿重写它？

每个 seoDataObject 上确实存在“节点”——但在代码片段中，“节点”也是 map 函数中的一个参数，所以我根本无法理解如何在 Typescript 中正确执行此操作？

标签： typescriptgraphqlapollo-client

解决方案

我不太能理解您真正要问的内容，您是否只想seo通过 id 查找，它可能在结果中，可能是空值数组或 null 本身？

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

推荐阅读