Can't access object prop in ts type-CodePudding

I have a type that looks like this:

export type GetTeamsQuery = {
  __typename?: 'Query'
  Teams?: {
    __typename?: 'Teams'
    docs?: Array<{
      __typename?: 'Team'
      email: any
      fullName: string
      id?: string | null
      order: number
      phone: string
      role: string
      county?: Array<{ __typename?: 'County'; id?: string | null; name: string } | null> | null
      image?: {
        __typename?: 'Media'
        alt?: string | null
        caption?: string | null
        url?: string | null
        id?: string | null
      } | null
      link?: Array<{
        __typename?: 'Team_Links'
        id?: string | null
        username?: string | null
        social?: { __typename?: 'Social'; id?: string | null; name: string; url: string } | null
      } | null> | null
    } | null> | null
  } | null
}

I'm able to access the first nested prop by: GetTeamsQuery[Teams], but I can't do GetTeamsQuery[Teams].docs? How can I access docs?

I tried this as well:

type Teams = GetTeamsQuery['Teams']
type Docs = Teams['docs']

TS error:

Property 'docs' does not exist on type '{ __typename?: "Teams" | undefined; docs?: ({ __typename?: "Team" | undefined; email: any; fullName: string; id?: string | null | undefined; order: number; phone: string; role: string; county?: ({ ...; } | null)[] | ... 1 more ... | undefined; image?: { ...; } | ... 1 more ... | undefined; link?: ({ ...; } | null)[]...'.ts(2339)

CodePudding user response：

In order to access this property, teams must not be undefined or null, typescript throws you the error, because in the case that teams is undefined, theoretically you will not be able to access a property of an undefined

so if it would work

export type GetTeamsQuery = {
  Teams: {
    docs?: Array<{
      email: any;
      fullName: string;
      id?: string | null;
      order: number;
      phone: string;
      role: string;
      county?: Array<{
        id?: string | null;
        name: string;
      } | null> | null;
      image?: {
        alt?: string | null;
        caption?: string | null;
        url?: string | null;
        id?: string | null;
      } | null;
      link?: Array<{
        id?: string | null;
        username?: string | null;
        social?: {
          id?: string | null;
          name: string;
          url: string;
        } | null;
      } | null> | null;
    }> | null;
  };
};

type Docs = GetTeamsQuery["Teams"]["docs"];

CodePudding user response：

I narrowed it down to a minimal reproduction to explain:

type Foo = {
  bar?: {
    baz: number;
  };
};

type A = Foo["bar"];
type B = A["baz"]; // Error: Property 'baz' does not exist on type '{ baz: number; } | undefined'. ts(2339)

Explanation:

The top-level property has a union type, one or more parts of which do not have the referenced property (in this case, undefined does not have the property baz). In your case, Teams can be undefined or null, which means that it may have a value which does not have the docs property.