quicktype - TypeScript의 매우 유용한 도우미

불꽃남자·2021년 1월 24일
1

QuickType

TypeScript를 적용한 프로젝트에 외부 API를 사용하면 무조건 발생하는 귀찮은 일이 하나 있다.
요청한 API의 응답 데이터의 interface(혹은 type)을 작성해야 하는 일이다. 데이터의 내용이 적으면 그냥 눈으로 보고 interface를 작성할 수 있지만, 데이터의 양이 방대하고 그 구조가 복잡하다면 일일이 interface를 작성하기엔 수지가 맞지 않다.


이 같은 고민을 해결해 주는 도구가 있으니 바로 quicktype이다. quicktype은 JSON 객체를 입력하면 그 객체의 interface를 자동으로 만들어준다. 일단 한 번 보라.

Riot Developer API의 TFT Match 응답 객체이다. 이 객체 안에 해당 Match에 참가한 소환사들의 시너지, 유닛, 아이템, 레벨, 남은 골드 등등 모든 정보가 들어 있어 직접 interface를 만들기엔 시간이 너무 많이 소요된다. 하지만 이 JSON 객체를 quicktype 사이트의 왼쪽에 입력하면 자동으로 interface를 만들어준다.

그리고 아래에는 입력한 JSON객체를 인자로 받아 JSON객체/JS객체 쌍방형변환을 해주는 함수도 제공하고 있다.

또한 quicktype은 사이트뿐만 아니라 VS extension으로도 사용할 수 있다.

🍇

아주 훌륭한 도구이고 velopert님의 typescript-redux 강의에도 소개되어 있다. 아마 velopert님이 quicktype에 대해 소개하는 것을 못 보았다면 하나하나 interface를 만들고 있었을 지도 모른다.

profile
프론트엔드 꿈나무, 탐구자.

0개의 댓글