How to access nested conditional type in 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

Where did Types come from ? I'm unable to reproduce. I'd willing to bet from fp-ts — captain-yossarian from Ukraine
– captain-yossarian from Ukraine, Commented Jan 13, 2021 at 10:06

Patrick Eriksson · Accepted Answer · 2022-04-26 18:08:04Z

TL;DR

type Payout = NonNullable<OfferQuery['offer']>['payouts'][number];
because Maybe causes OfferQuery['offer'] to be nullable, and so you need to wrap it with the NonNullable type util first:

Interpreting the error-message

The error-message is unclear, because it does not reveal what Maybe actually means.

The definition of Maybe, will say:

type Maybe<T> = T | null;

meaning when you try to get payouts from OfferQuery['offer'], you're also trying to get payouts from null (which doesn't exist). This is what the error-message is trying to communicate.

GraphQL codegen and nullable

GraphQL codegen will (correctly) add Maybe to each field that is nullable in your GraphQL schema. This has the implication that when you use the type OfferQuery['offer'] you will get both null AND the actual definition. I.e. you're actually receiving null together with the rest:

type ExampleWithMaybe = null | {
  payouts: { weGet: number; theyGet: number }[];
  /* ...the rest of the definition... */
};

instead of receiving what you likely expected:

type ExampleWithoutMaybe = {
  payouts: { weGet: number; theyGet: number }[];
  /* ...the rest of the definition... */
};

So when you want to use the type payouts on OfferQuery['offer'], you need to remember that you have to exclude the null-value first, because payouts doesn't exist on null.

The solution: Remove `null`

In order to get the type definition without null, you can use the type-util NonNullable, meaning we can rewrite ExampleWithoutMaybe from the above example like so:

type ExampleWithMaybe = null | {
  payouts: { weGet: number; theyGet: number }[];
  /* ...the rest of the definition... */
};
type ExampleWithoutMaybe = NonNullable<ExampleWithMaybe>;

and to make it specific to your example:

// ❌ `payouts` doesn't exist on `null`
// type Payout = OfferQuery['offer']['payouts'][number];

// ✅
type Payout = NonNullable<OfferQuery["offer"]>["payouts"][number];

Thank you very much NonNullable is more elegant then using Exclude.

chillyistkult · Accepted Answer · 2021-12-09 17:47:54Z

0

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

answered Dec 9, 2021 at 17:47

chillyistkult

1,1592 gold badges12 silver badges24 bronze badges

Collectives™ on Stack Overflow

How to access nested conditional type in typescript

2 Answers 2

TL;DR

Interpreting the error-message

GraphQL codegen and nullable

The solution: Remove `null`

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

TL;DR

Interpreting the error-message

GraphQL codegen and nullable

The solution: Remove null

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related

The solution: Remove `null`