当我映射和展平数组时，TypeScript 会错误地出错？

Question

我正在使用 GraphQL Codegen 从我的 GraphQL 模式生成 TypeScript 类型。这是我的查询，我使用了一个片段，因此它只有易于导出的类型：

query reservationsPage($schoolSettingId: Int!, $day: UnixDate!) {
  roomsForSchoolSettingAll(schoolSettingId: $schoolSettingId) {
    ...reservationsPage
  }
}

fragment reservationsPage on Room {
    id
    name
    children {
      id
      name
      registrationToday(day: $day) {
        id
        checkIn
        checkOut
        importantInformation
        plannedCheckOut
        absent
        pickUpBy {
          id
          name
        }
      }
    }
}

返回的数据如下所示：

const res = [
  {
    id: 1,
    __typename: "Room",
    name: 'Name 1',
    children: []
  },
  {
    id: 2,
    __typename: "Room",
    name: 'Name 2',
    children: [
      {
        id: 3,
        __typename: "ChildProfile",
        name: 'James',
        registration: [
          {
            id: 4,
            __typename: "Registration",
            checkIn: "06:00:00",
            checkOut: "14:00:00",
            absent: null,
            importantInformation: null,
            pickUpBy: null
            plannedCheckOut: null  
          }
        ]
      }
    ]
  }
]

我可以在新变量上使用这种类型，它按预期工作：

const childrenCurrent: ReservationsPageFragment['children'] = roomsForSchoolSettingAll.find(
    (room) => room.id === selectedRoomId,
  )?.children;

但是，当我尝试在另一个变量上使用它时，出现 TypeScript 错误：

const childrenAll: ReservationsPageFragment['children'] = roomsForSchoolSettingAll
  .map((room) => room.children)
  .flat();

TS2322: 类型 '(({ __typename?: "ChildProfile" | undefined; } & Pick<ChildProfile, "id" | "name"> & { registrationToday?: ({ __typename?: "Registration" | undefined; } & Pick< ...> & { ...; }) | null | undefined; }) | null | undefined)[]' 不可分配给类型 'Maybe<{ __typename?: "ChildProfile" | 不明确的; } & Pick<ChildProfile, "id" | "name"> & { registrationToday?: ({ __typename?: "Registration" | undefined; } & Pick<...> & { ...; }) | 空| 不明确的; }>[]'。输入 '({ __typename?: "ChildProfile" | undefined; } & Pick<ChildProfile, "id" | "name"> & { registrationToday?: ({ __typename?: "Registration" | undefined; } & 选择<...> & { ...; }) | 空| 不明确的; }) | 空| undefined' 不能分配给类型 'Maybe<{ __typename?: "ChildProfile" | 不明确的; } & Pick<ChildProfile, "id" | "name"> & { registrationToday?: ({ __typename?: "Registration" | undefined; } & Pick<...> & { ...; }) | 空| 不明确的; }>'。类型 'undefined' 不能分配给类型 'Maybe<{ __typename?: "ChildProfile" | 不明确的; } & Pick<ChildProfile, "id" | "name"> & { registrationToday?: ({ __typename?: "Registration" | undefined; } & Pick<...> & { ...; }) | 空| 不明确的; }>'。{ __typename?: "ChildProfile" | 不明确的; } & Pick<ChildProfile, "id" | "name"> & { registrationToday?: ({ __typename?: "Registration" | undefined; } & Pick<...> & { ...; }) | 空| 不明确的; }>'。类型 'undefined' 不能分配给类型 'Maybe<{ __typename?: "ChildProfile" | 不明确的; } & Pick<ChildProfile, "id" | "name"> & { registrationToday?: ({ __typename?: "Registration" | undefined; } & Pick<...> & { ...; }) | 空| 不明确的; }>'。{ __typename?: "ChildProfile" | 不明确的; } & Pick<ChildProfile, "id" | "name"> & { registrationToday?: ({ __typename?: "Registration" | undefined; } & Pick<...> & { ...; }) | 空| 不明确的; }>'。类型 'undefined' 不能分配给类型 'Maybe<{ __typename?: "ChildProfile" | 不明确的; } & Pick<ChildProfile, "id" | "name"> & { registrationToday?: ({ __typename?: "Registration" | undefined; } & Pick<...> & { ...; }) | 空| 不明确的; }>'。}) | 空| 不明确的; }>'。类型 'undefined' 不能分配给类型 'Maybe<{ __typename?: "ChildProfile" | 不明确的; } & Pick<ChildProfile, "id" | "name"> & { registrationToday?: ({ __typename?: "Registration" | undefined; } & Pick<...> & { ...; }) | 空| 不明确的; }>'。}) | 空| 不明确的; }>'。类型 'undefined' 不能分配给类型 'Maybe<{ __typename?: "ChildProfile" | 不明确的; } & Pick<ChildProfile, "id" | "name"> & { registrationToday?: ({ __typename?: "Registration" | undefined; } & Pick<...> & { ...; }) | 空| 不明确的; }>'。

Answer 1

如果在错误消息文本中进行替换，它会变得更具可读性：

TS2322：
类型 '((X) | null | undefined)[]' 不能分配给类型 'Maybe<X>[]'。
输入'(X) | 空| undefined' 不能分配给类型 'Maybe<X>'。
类型 'undefined' 不能分配给类型 'Maybe<X>'。

其中 X 代表

{ __typename?: "ChildProfile" | 不明确的; } & Pick<ChildProfile, "id" | "name"> & { registrationToday?: ({ __typename?: "Registration" | undefined; } & Pick<...> & { ...; }) | 空| 不明确的; }

现在我们可以看到编译器指示该类型Maybe<X>不能保存值undefined。
为了满足编译器，您有多种选择

• 过滤掉undefined值
• 使用类型转换（如 Daniele Ricci 的回答中所述）
• 更改Maybe类型的定义以允许undefined值
  
  

如果您选择修改Maybe类型，GraphQL 代码生成器文档中有一个示例说明如何执行此操作：