How to look up specific property using indexed access type?

Question

I have the following auto generated code:

export type TourItemQuery = {
  __typename?: 'Query';
  tourItem?: {
    __typename?: 'TourItem';
    id: number;
    name: string;
    images: Array<{
      __typename?: 'Image';
      id: number;
      url: string;
      blurhash: string;
    }>;
    itineraries: Array<{
      __typename?: 'ItineraryList';
      id: string;
      day?: number | null;
      polyline: string;
      pointOfInterestList: Array<{
        __typename?: 'PointOfInterestList';
        order: number;
        distanceFromPrevious?: number | null;
        durationFromPrevious?: number | null;
        pointOfInterest: {
          __typename?: 'PointOfInterest';
          id: number;
          name: string;
          location: {
            __typename?: 'Point';
            latitude: number;
            longitude: number;
          };
          images: Array<{
            __typename?: 'Image';
            id: number;
            url: string;
            blurhash: string;
          }>;
        };
      }>;
    }>;
  } | null;
};

How can I access the itineraries type?

Here's what I tried:

type TourItem = TourItemQuery['tourItem']; // OK
type Itineraries = TourItemQuery['tourItem']['itineraries']; // NOK: "Property 'itineraries' does not exist on type {...}"

Documentation reference: https://www.typescriptlang.org/docs/handbook/2/indexed-access-types.html

Answer 1

TourItemQuery['tourItem'] is a union type that includes null and undefined, use NonNullable to exclude them from the union

type Itineraries = NonNullable<TourItemQuery['tourItem']>['itineraries'];