[typescript] 사용자 지정 타입에 '또는'을 쓰고 데이터에 접근하는 경우 type error

문제 인식

랭크 페이지에서 일반전 업데이트로 타입을 변경해 주었다.

데이터 구조와 내용이 유사하다고 판단되어 RankData의 rankList 타입에만 Normal 데이터 타입을 추가해 주었다.

export interface Rank {
  rank: number;
  intraId: string;
  statusMessage: string;
  ppp: number;
  winRate: number;
}

export interface Normal {     // 추가된 일반전 데이터 타입
  rank: number;
  intraId: string;
  statusMessage: string;
  level: number;
  exp: number;
}

export interface RankData {
  myRank: number;
  currentPage: number;
  totalPage: number;
  rankList: Rank[] | Normal[]; // '또는'으로 추가해 주었음 
}

이렇게 데이터 타입을 추가해 주고, rankList의 데이터 중

Rank Normal 두 데이터타입이 공유하는 데이터에 접근했을 경우에는 에러가 나지 않지만, 아닐 경우에 'Property does not exist... - ts(2339)에러가 나는 것을 확인했다.

ex ) rank intraId statusMessage : 😊 it's OK
ex ) ppp winRate level exp : 😱 error

문제 해결

typescript는 사용자 지정 Type Guards 기능을 제공한다.

데이터 안의 특정 프로퍼티의 유무에 따라 타입을 평가하고, 타입을 보장하여 프로퍼티를 사용할 수 있다.

function isRankType(arg: Rank | Normal): arg is Rank {
  return 'ppp' in arg;
}    // 타입을 확인하는 함수


rankData?.rankList.map((item: Normal | Rank, index) => (
        <RankListItem
          key={item.intraId}
          // ...
          ppp={isRankType(item) ? item.ppp : null}    // 타입 확인 후 접근가능
          level={!isRankType(item) ? item.level : null}
          exp={!isRankType(item) ? item.exp : null}
        />
      ))

참고

[TypeScript] 타입스크립트 Type Guard 및 타입을 좁혀나가는 여러가지 방법