[TypeScript]interface 정의 노가다 쉽게(?)하기

공부 중 많은 데이터들에 대한 TypeScript의 interface 정의방법과 tip 정리

---

1.  API로 받아온 데이터의 Type 정의필요

fetch로 api 받아오기 (코드)

    ...
    
    useEffect(() => {
      (async() => {
        const infoData = await (
          await fetch(`https://api.coinpaprika.com/v1/coins/${coinId}`)
        ).json();
        const priceData = await (
          await fetch(`https://api.coinpaprika.com/v1/tickers/${coinId}`)
        ).json();
        setInfo(infoData);
        setPrice(priceData);
        setLoading(false);
      }) ();
    }, []);
    
    ...

TypeScript는 위처럼 api를 받아올때는 각각의 데이터들을 모두 Type선언을 interface로 해주어야 한다.

근데... 너무 많다...

---

2. 크롬 Console창을 이용하여 Key, Value 가져오기

1단계 : API로 받아온 json 데이터를 console.log를 사용하여 확인

2단계 : console창에서 해당 object를 우클릭하여 Store object as global variable를 선택

3단계 : 하기 스크린샷 처럼 temp1로 할당 해줌

4단계 : 이를 이용하여 key값만 추출 (코드는 하기 참고)

5단계 : VSCode에 넣어 쉼표를 선택 후 cmd + d 를 누르면 쉼표만 선택 할 수 있다. 

6단계 : 그리고 엔터

7단계 : 정렬한 key를 전체 선택 후 option + shift + i 를 눌러 전체 수정

8단계 : 데이터 value의 type도 동일하게 가져와서 위 5~6단계 동일하게 작업

9단계 : 작업한 value값을 전체 복사 후 7단계 처럼 커서를 놓고 붙혀 넣으면 똑똑하게 알아서 넣어줌

---

3. 주의사항 (Array, Object 데이터)

Array는 Object로 인식하여 주기때문에 수작업으로 지정해 줘야 한다.

Object또한 뎁스가 있다면 그것 또한 수작업으로 진행히야한다.

---

 

정말 귀찮은 작업이다.

이걸 알아서 해주는 익스텐션이 있다고 하니 더 공부하자.