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

Posted 2023-03-08

【中文标题】当我映射和展平数组时，TypeScript 错误地出错？

【英文标题】：TypeScript incorrectly errors when I map and flat an array?

【发布时间】：2021-03-04 02:15:00

【问题描述】：

我正在使用 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 & registrationToday?: ( __typename?: "Registration" | undefined; & Pick<...> & ...; ) | null | undefined; ) | null | undefined)[]' 不可分配给类型 'Maybe & registrationToday?: ( __typename?: "Registration" | undefined; & Pick<...> & ...; ) |空 |不明确的; >[]'。类型 '( __typename?: "ChildProfile" | undefined; & Pick & registrationToday?: ( __typename?: "Registration" | undefined; & Pick<...> & ...; ) | 空 | 未定义; ) |空 | undefined' 不可分配给类型 'Maybe & registrationToday?: ( __typename?: "Registration" | undefined; & Pick<...> & ...; ) |空 |不明确的; >'。类型 'undefined' 不可分配给类型 'Maybe & registrationToday?: ( __typename?: "Registration" | undefined; & Pick<...> & ...; ) |空 |不明确的; >'。

【参考方案1】：

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

TS2322：类型 '((X) | null | undefined)[]' 不可分配给类型 '也许[]'。键入'(X) |空 | undefined' 不可分配给 类型“也许”。类型“未定义”不可分配给类型 '也许'。

X 代表的地方

__typename?: "ChildProfile" |不明确的; & 挑选 & registrationToday?: ( __typename?: “注册” |不明确的; & 选择<...> & ...; ) |空 | 不明确的;

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

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

如果您选择修改 Maybe 类型，在 GraphQL 代码生成器 documentation 中有一个示例：

【参考方案2】：

很抱歉，从您的问题来看，我无法理解您是在寻找错误原因的解释还是只是一种使其正常工作的方法。

在第一种情况下，我不是 GraphQL 大师，所以您可以忽略我的回答，向了解 GraphQL 的人寻求答案。

在第二种情况下，您可以尝试不指定 childrenAll 类型：

const childrenAll = roomsForSchoolSettingAll
  .map((room) => room.children)
  .flat();

或使用类型转换：

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