API 함수 타입 구체화

백엔드로부터 API를 호출받아 값을 리턴해주는 API 함수들의 type을 지정합니다.

Postman API 해당 사이트로부터 API를 request하여 response를 받아오는 구조입니다.

1. 일반적인 함수 타입 선언

---

function fetchCountryInfo(countryCode: any, status: any) {
  // countryCode "CH" , "KR" ... (string)
  // params: confirmed, recovered, deaths 
  const url = `https://api.covid19api.com/country/${countryCode}/status/${status}`;
  return axios.get(url);
}

위와 같이 나라의 정보를 불러오는 URI가 있습니다. (axios의 리턴타입 오류는 후에 다룹니다.)

여기서 parameter들의 type을 지정하기 위해서는 실제로 백엔드에서 countryCode 와 status를 request로 전송할때 어떤 데이터 타입으로 보내는지 확인해야 합니다. (이는 위에 명시된 Postman 사이트에서 참고)

참고 결과, countryCode 와 status 모두 문자열 타입으로 데이터를 전송합니다.
따라서 아래와 같이 parameter들을 리팩토링 할 수 있습니다.

function fetchCountryInfo(countryCode: string, status: string) {
  // countryCode "CH" , "KR" ... (string)
  // params: confirmed, recovered, deaths (3가지만 받음)
  const url = `https://api.covid19api.com/country/${countryCode}/status/${status}`;
  return axios.get(url);
}

이때 타입 정의 시, 범위가 좁고 단언적인 parameter에 대해서는 enum으로 선언하여 타입을 좁혀나갈 수 있습니다. (status 가 해당됨)

enum CovidStatus {
  Confirmed = 'confirmed',
  Recovered = 'recovered',
  Deaths = 'deaths',
}

function fetchCountryInfo(countryCode: string, status: CovidStatus) {
  // countryCode "CH" , "KR" ... (string)
  // params: confirmed, recovered, deaths (3가지만 받음)
  const url = `https://api.covid19api.com/country/${countryCode}/status/${status}`;
  return axios.get(url);
}

2. arrow function 타입 선언

---

function setDeathsList(data: any) {
  const sorted = data.sort(
    (a:any, b:any) => getUnixTimestamp(b.Date) - getUnixTimestamp(a.Date),
  );
  sorted.forEach((value: any) => {
    // ...
  });
}

arrow function에서 타입을 선언 할 때 주의할 점은,
arrow function을 도는 iterator의 타입 선언 시 ((iterator : type) => { }); 형태로 선언합니다.