API로 받아오는 Data Interface 퀵하게 작성하기

API fetching 코드 작성하면서 가장... 귀찮음서도 은근히 손이 가는 게 response data의 타입을 정의하는 일이겠쥬.. 그걸 좀 더 효율적으로 쓸 수 있는 방법을 정리합니다.

정의해야 하는 data key들을 콘솔 찍기

// nowPlayingData?.results[0]의 데이터 타입을 정의하고자 할 때, 해당 데이터의 key를 콘솔찍습니다.
console.log(Object.keys(nowPlayingData?.results[0]))

// 결과 ["adult", "backdrop_path", "genre_ids", "id", "original_language", "original_title", "overview", "popularity", "poster_path", "release_date", "title", "video", "vote_average", "vote_count"]

이제 이것들을 복붙해서 cmd + d 단축키를 써가면서 일단 키만 정리.

export interface Movie {
  adult: ;
  backdrop_path: ;
  genre_ids: ;
  id: ;
  original_language: ;
  original_title: ;
  overview: ;
  popularity: ;
  poster_path: ;
  release_date: ;
  title: ;
  video: ;
  vote_average: ;
  vote_count: ;
} 

그 다음으로는 values를 찍어봐야겠죠...? 이 때는 map을 이용합니다.

// 이번에는 values의 콘솔을 찍되 type을 반환하는 map을 돌려줍니다.
console.log(Object.values(nowPlayingData?.results[0]).map(v => typeof v))

// 결과 ["boolean", "string", "object", "number", "string", "string", "string", "number", "string", "string", "string", "boolean", "number", "number"]

그 다음엔 cmd + d 단축키와 option + shift + i 단축키로 찹찹..

export interface Movie {
  adult: boolean;
  backdrop_path: string;
  genre_ids: object;
  id: number;
  original_language: string;
  original_title: string;
  overview: string;
  popularity: number;
  poster_path: string;
  release_date: string;
  title: string;
  video: boolean;
  vote_average: number;
  vote_count: number;
} 

짜잔~ 쉽죠? 물론 typeof로 정의한 경우에 Array와 같은 타입은 object로만 표시하니 보정은 필요합니다. 마무리는 API 문서를 참고하면서 수정해줍니다.