ข้อผิดพลาดของ Typescript "Property '0' ไม่มีอยู่ในประเภท X" เมื่อใช้โค้ด Graphql ที่สร้างขึ้น

ฉันกำลังมีปัญหาในการเข้าใจวิธีแก้ไขข้อผิดพลาดในการพิมพ์นี้

ฉันมีโค้ดนี้:

<script lang="ts">
  import type { PlayerListQuery } from "queries";

  export let player: PlayerListQuery["playerList"]["edges"][0]["node"];
</script>

ด้วย PlayerListQuery:

export type PlayerListQuery = {
  __typename?: "Query";
  playerList: {
    __typename?: "PlayerConnection";
    edges?: Array<{
      __typename?: "PlayerEdge";
      cursor: any;
      node?: {
        __typename?: "Player";
        name?: string | null;
        age?: number | null;
        id: string;
      } | null;
    } | null> | null;
    pageInfo: {
      __typename?: "PageInfo";
      hasNextPage: boolean;
      hasPreviousPage: boolean;
      startCursor?: any | null;
      endCursor?: any | null;
    };
  };
};

ข้อผิดพลาดคือ:

Property '0' does not exist on type '({ __typename?: "PlayerEdge" | undefined; cursor: any; node?: { __typename?: "Player" | undefined; name?: string | null | undefined; ... more ...; } | null | undefined; } | null)[] | null | undefined'.ts(2339)

ซึ่งกำลังอ้างถึง ["edges"][0]["node"]

จะแก้ไขอันนี้อย่างไร?

คำตอบ #1

คุณสมบัติ edges และ Array<[index]> สามารถเป็น null หรือ undefined ได้ นั่นเป็นเหตุผลว่าทำไมคุณจึงไม่สามารถเข้าถึงคุณสมบัติลูกของพวกมันโดยตรง

สิ่งที่คุณสามารถทำได้เพื่อให้ได้ค่าที่ไม่เป็น null คือการใช้ตัวช่วยประเภทมาตรฐาน NonNullable ซึ่งจะลบประเภท undefined และ null ทั้งหมดออกจาก union และจะเหลือเพียงประเภทพื้นฐานที่สามารถเข้าดัชนีได้เท่านั้น

// Use in-between types
type ExistingEdges = NonNullable<PlayerListQuery["playerList"][
    'edges'
 ]>
type ExistingEdgeValues = NonNullable<ExistingEdges[0]>

export let player: ExistingEdgeValues['node'];

// Direct
let player2: NonNullable<NonNullable<PlayerListQuery["playerList"]['edges']>[0]>['node'];

สนามเด็กเล่น TS