배열, 오브젝트 타입 내부요소의 타입 추출하기

설명
Tags
typescript
 

오브젝트

개요

data: GetTodayInsufficientBeadInfoQuery
여기서 data.todayInsufficientBead ← 에 대한 타입만 가져오려고 한다.

GetTodayInsufficientBeadInfoQuery 타입

export type GetTodayInsufficientBeadInfoQuery = (
  { __typename?: 'Query' }
  & { todayInsufficientBead?: Maybe<Array<(
    { __typename?: 'InsufficientBeadType' }
    & Pick<InsufficientBeadType, 'bead'>
    & { cartridgeLineUp: (
      { __typename?: 'CartridgeLineUpType' }
      & Pick<CartridgeLineUpType, 'serialNumber'>
      & { nutrientGroup: (
        { __typename?: 'NutrientGroupType' }
        & Pick<NutrientGroupType, 'name'>
      ) }
    ) }
  )>> }
);
 

pick를 하면 되지 않나?

ㄴㄴㄴㄴㄴㄴㄴㄴ 아님
type Test2 = Pick<GetTodayInsufficientBeadInfoQuery, 'todayInsufficientBead'>;

// 아래처럼 가져오므로 todayInsufficientBead 라는 키도 같이 오게된다.
{ todayInsufficientBead?: Maybe<Array<(
  { __typename?: 'InsufficientBeadType' }
  & Pick<InsufficientBeadType, 'bead'>
  & { cartridgeLineUp: (
    { __typename?: 'CartridgeLineUpType' }
    & Pick<CartridgeLineUpType, 'serialNumber'>
    & { nutrientGroup: (
      { __typename?: 'NutrientGroupType' }
      & Pick<NutrientGroupType, 'name'>
    ) }
  ) }
)>> }
 

[] 이걸로 참조하면 됨 (인덱싱)

type Test3 = GetTodayInsufficientBeadInfoQuery['todayInsufficientBead'];

// 원하는 대로 잘 가져옴
Maybe<Array<(
  { __typename?: 'InsufficientBeadType' }
  & Pick<InsufficientBeadType, 'bead'>
  & { cartridgeLineUp: (
    { __typename?: 'CartridgeLineUpType' }
    & Pick<CartridgeLineUpType, 'serialNumber'>
    & { nutrientGroup: (
      { __typename?: 'NutrientGroupType' }
      & Pick<NutrientGroupType, 'name'>
    ) }
  ) }
)>>
 

결론

data: GetTodayInsufficientBeadInfoQuery

// good
data.todayInsufficientBead: GetTodayInsufficientBeadInfoQuery['todayInsufficientBead']
 

배열

배열 내부의 타입에 접근하고 싶은 경우에는 [0]으로 접근해서 하면 됨.
 
bodyCOnditionOfUser 타입 내의 bodyCondition 타입만 뽑아내고 싶은데, bodyConditionOfUser 타입이 Array 라서 내부 요소에 바로 접근이 안됨.
GetBodyConditionsQuery['bodyConditionOfUser'][0] 이런식으로 배열 요소 하나에 접근한 후에 하면 됨.
 
export type GetBodyConditionsQuery = { __typename?: 'Query' } & {
  frequentlySelectedBodyConditions: Array<
    { __typename?: 'BodyConditionType' } & BodyConditionInfoFragment
  >;
  bodyConditionOfUser: Array<
    { __typename?: 'BodyConditionOfUserType' } & {
      bodyCondition: { __typename?: 'BodyConditionType' } & Pick<
        BodyConditionType,
        'id' | 'name' | 'icon'
      > & {
          bodyConditionGroup: Array<
            { __typename?: 'BodyConditionGroupType' } & Pick<
              BodyConditionGroupType,
              'name'
            >
          >;
        };
    }
  >;
};

export type test = GetBodyConditionsQuery['bodyConditionOfUser'][0]
export type test2 = test['bodyCondition']