如何访问 typescript 中的嵌套条件类型

Question

The origin of the following autogenerated type is a GraphQL query:

export type OfferQuery = { __typename?: 'Query' } & {
  offer: Types.Maybe<
    { __typename?: 'Offer' } & Pick<Types.Offer, 'id' | 'name'> & {
        payouts: Array<
          { __typename?: 'Payout' } & Pick<
            Types.Payout,
            'weGet' | 'theyGet'
          > & {
              offer: { __typename?: 'Offer' } & Pick<Types.Offer, 'id'>;
              publisher: Types.Maybe<
                { __typename?: 'Publisher' } & Pick<Types.Publisher, 'id'>
              >;
              eventType: Types.Maybe<
                { __typename?: 'EventType' } & Pick<
                  Types.EventType,
                  'id' | 'name'
                >
              >;
            }
        >;
      }
  >;
};

Now I would like to reuse parts of the OfferQuery type in my react component, namely a payout element.

type Payout = OfferQuery['offer']['payouts'][number];

This however gives me an error "Property 'payouts' does not exist on type 'Maybe{ __typename?: "Offer" | undefined; }..." .

Do you have any suggestions on how to circumvent this issue and access payouts definition anyway?

tsconfig.json

{
  "compilerOptions": {
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "esnext"
  }
}

Typescript 4.1.3

Answer 1

Apparently the only solution is to exclude null and undefined before accessing the array element type:

type Payout = Exclude<OfferQuery['offer']['payouts'], null | undefined>[number];