如何使用 Apollo 后端在 TypeScript Angular 应用程序中键入部分类型？答案

【问题标题】：How do you type partial types in a TypeScript Angular application using an Apollo backend?如何使用 Apollo 后端在 TypeScript Angular 应用程序中键入部分类型？
【发布时间】：2019-01-30 03:54:01
【问题描述】：

编辑：我正在寻找来自 Graphql-Angular 社区的权威和来源答案，以提供最佳实践示例。

例如，我们在 TypeScript 中定义了一个 Person 类型：

interface Person {
  firstName: string;
  lastName: string;
  birthDate: Date;
  age: number;
  ...and many more attributes
}

假设你有一个组件，根据 graphql 的口头禅，你只获取你需要的东西。没有过度获取和获取不足。

我只需要Person 的firstName 和age，所以我在我的Apollo Query 中做了这个。

现在，我如何输入我刚刚获取的这个对象？

结构是Person 的一部分，所以我倾向于简单地做Partial<Person>。这使得在Person 上声明的所有属性都是可选的。

但这不是这里发生的事情。我们只使用age 和firstName 提取Person 的一部分。就是这样。

除了制作另一个界面之外，没有其他方法可以正确键入：

interace MyComponentPerson {
  firstName: string;
  age: number;
}

是否有官方的风格指南/方法可以做到这一点？我问过他们的懈怠，但没有得到答案。看了文档也没有看到任何关于这个的东西。

【问题讨论】：

至于我——我什至没有完整的人（例如）类型——我只有我需要的东西，如果我需要不同形式的它，我为每种形式都有一个类型（可能继承)
是的，我的意思是有很多方法可以做到这一点，我想听听权威人士关于最佳做法的意见。

标签： angular typescript graphql apollo

【解决方案1】：

你可以定义：

type MyComponentPerson = Pick<Person, "firstName" | "age">;

如果您想根据查询自动生成此类型，Type gql-tag in TypeScript 之类的内容可能适合您。如果该解决方案不太正确，请提供您的查询示例，我可能会提供帮助。

【讨论】：

您的解决方案肯定是有道理的，但我只是在寻找最佳实践和一些权威。让我的帖子更清楚。我看过的所有这些入门应用程序都只返回一个类型为interface 的实例，没有任何变化。我想看到一个真正的 graphql 界面，它有 20 多个属性，并且喜欢 2 个不同的查询，它们会得到不同的结果和参数，说明哪种方法最好。

【解决方案2】：

因为可以静态分析 GraphQL 架构，所以根本不需要手动编写接口。有很多工具可以帮您完成。

我的团队的工作主要基于 GraphQL，我们使用 GraphQL 代码生成器。您无需手动编写接口，然后从中挑选一些字段，而是使用该工具并获得您可能需要的所有类型和接口。

https://github.com/dotansimha/graphql-code-generator

它会创建一个特定于您的查询的类型。如果您仅获取名字和年龄，它将仅使用该名称创建类型。

但是使用 Apollo 和生成类型还有更好的方法。而不是用gql 标记包装查询，然后生成并将类型附加到它。您可以将 GraphQL 代码生成器与我编写的库 Apollo Angular 结合使用。

这个想法是让您只在.graphql 文件中编写查询，这样您就可以获得完整的 IDE 支持（自动完成、验证等），并且 codegen 会生成一个可以使用的强类型服务。

一个例子，你写查询：

query MyFeed {
  feed {
    id
    name
  }
}

接下来，您运行 codegen，作为回报，您将获得一个名为 MyFeedGQL 的 Angular 服务：

import { MyFeedGQL } from './graphql';

class AppComponent {
  constructor(myFeed: MyFeedGQL) {
    this.myFeed.watch().valueChanges.subscribe(() => ...);
  }
}

因此，您不再需要在 Apollo 中定义类型。

这是一篇关于它的文章： https://medium.com/the-guild/apollo-angular-code-generation-7903da1f8559

【讨论】：