无法在React Relay GraphQL Typescript解构中获取数组元素类型

Question

中继为查询生成以下类型：

export type graphqlEventsQueryVariables = {
    query: string;
};
export type graphqlEventsQueryResponse = {
    readonly events: ReadonlyArray<{
        readonly name: string;
        readonly latitude: number;
        readonly longitude: number;
        readonly id: string;
    } | null> | null;
};
export type graphqlEventsQuery = {
    readonly response: graphqlEventsQueryResponse;
    readonly variables: graphqlEventsQueryVariables;
};

然后我尝试在.tsx文件中使用它：

import { graphqlEventsQueryResponse } from "./__generated__/graphqlEventsQuery.graphql";
type Events = graphqlEventsQueryResponse['events'];
type ArrayElement<A> = A extends readonly (infer T)[] ? T : never;
type Event = ArrayElement<Events>;

events.map(
  (
      { id }: Event
  ) => (
      <></>
));

但是所有结构化变量都出现此错误：

Property 'id' does not exist on type '{ readonly name: string; readonly latitude: number; readonly longitude: number; readonly id: string; } | null'.ts(2339)

Answer 1

根据您编写的接口，events是对象数组，可能是{ readonly name: string; readonly latitude: number; readonly longitude: number; readonly id: string; }或null类型。

因此，您不能在events.map(...)的回调函数中直接对对象进行解构，因为该对象也可以为null，并且不能对null进行解构。

您应该插入检查是否定义了事件，然后相应地处理案例。

events.map((event: Event) => {
  if (!event) {
    return null;
  }

  const { id } = event

  // do the rest 

  return <></>;
};