TS - interface 쉽게 작성하기(json데이터)

타입스크립트를 리액트 프로젝트에 적용해보면서 연습중이다.

api를 받아온 결과를(json객체) type지정하면서 구조가 복잡하거나 depth가 깊어질 때, key나 자료형을 하나하나 입력하기 번거로웠다. 

 

해결방법은 2가지가있는데, 편리한 사이트를 이용하거나 개발자도구에서 수작업하기.^0^

 

• http://json2ts.com/

json2ts - generate TypeScript interfaces from json

• https://app.quicktype.io/?l=ts

Instantly parse JSON in any language | quicktype

 

개꿀사이트.

---

 

두번째로는 수작업~

1. json 데이터를 콘솔에 찍고 개발자도구로 가서 store object as global variable로 temp1이라는 변수에 저장한다.

 

 

2. Object.keys(temp1).join(); 로 key 값만 따로 저장. 복사 후 코드 편집기(vscode)에서

붙여넣기 하고 ctrl+d 로 쉼표삭제, 줄바꿈

 

3. Object.values(temp2).map(value => typeof value).join(); 로 타입만 필터링 후 복사해서 위 작업 반복

 

4. 2번의 결과물 드래그 후 alt + shift + i, 3번 결과물을 붙인다.

 

json데이터 자료형 중 array는 object 자료형이기에 type 또한 object로 나오는데, 그 부분은 또 

타입지정해주면 된다. 귀찮으니까 그냥 사이트 이용하자.

 

그럼 끝~

 

ㅎㅎ 사이트 쓴거임.