如何缩小由图形QL编码器自动生成的打字稿类型？

Question

我从AWS Amplify GraphQL（我相信它使用apollo codegen）自动生成了一个类型脚本，如下所示：

export type GetNoteQuery = {
  getNote:  {
    __typename: "Note",
    id: string,
    createdAt: string | null,
    updatedAt: string | null,
    title: boolean | null,
    content: string | null,
  } | null,

我想生成一个基本类型的“注释”，作为“基本”类型，在使用返回的数据时在我的代码中使用。即将注释映射到React组件上，等等。

有没有办法缩小自动生成的类型，或者以某种方式对其进行扩展，使其看起来像：

type Note = {
    id: string,
    createdAt: string | null,
    updatedAt: string | null,
    title: boolean | null,
    content: string | null
}

Answer 1

这里是GraphQL代码生成器。

关于生成这种TS代码的决定，我们有一些背景知识：我们开始使用typescript作为一个插件来创建GraphQL模式的精确表示。然后，typescript操作获取操作和片段（从模式中提取特定字段和数据），并生成代码，该代码通过typescript插件从生成的类型中获取相同的字段和数据字段。

我们看到一些开发人员更喜欢更干净的代码，因此您可以使用preResolveTypes:true来避免使用Pick，而只使用原语类型。您还可以使用onlyOperationTypes:true，告知codegen避免生成不需要的类型。

Answer 2

您可以使用索引查询来获取与排除耦合的getNote类型，以从属性类型中删除null。然后，您可以使用Omit来删除额外的属性。

export type GetNoteQuery = {
  getNote: {
    __typename: "Note",
    id: string,
    createdAt: string | null,
    updatedAt: string | null,
    title: boolean | null,
    content: string | null,
  } | null
}

type Note = Omit<Exclude<GetNoteQuery['getNote'], null>, '__typename'>

您还可以使用接口为类型获取更强大的名称：

interface Note extends Omit<Exclude<GetNoteQuery['getNote'], null>, '__typename'> { }