Lỗi Typescript "Property '0' does not exist on type X" khi sử dụng code graphql được sinh tự động

Tôi đang gặp khó khăn trong việc hiểu cách sửa lỗi gõ chữ này.

Tôi có đoạn mã này:

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

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

với 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;
    };
  };
};

lỗi là:

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)

đang đề cập đến ["edges"][0]["node"].

Làm thế nào để sửa cái này?

Câu trả lời #1

Các thuộc tính edges và Array<[index]> có thể là null hoặc undefined, đó là lý do tại sao bạn không thể truy cập trực tiếp vào các thuộc tính con của chúng.

Những gì bạn có thể làm để lấy các giá trị không phải null là sử dụng trợ giúp kiểu tích hợp sẵn NonNullable. Điều này sẽ loại bỏ tất cả các kiểu undefined và null khỏi hợp nhất và chỉ để lại các kiểu cơ bản có thể được lập chỉ mục.

// 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'];

Sân chơi TS