코로나 요약 정보 API 함수 타입 정의(2) - 국가별 확진자수 API 타입 정의

이번 포스팅에선 프론트에서 request 인자값들을 넘기면 그 인자값을 받아 response를 보여주는 API 함수의 타입 정의에 대해서 다룰 예정입니다.

아래 GIF는 각 국가별 리스트 중,
한 국가를 클릭 시 확진자수/회복자수/사망자수를 보여줍니다.

---

Request 구조

국가를 클릭했을때 API는 총 3개가 불립니다. 이때 Request URL 구조를 보면 korea-south 의 country명과 그리고 deaths 라는 status값을 request로 프론트에서 보내는 GET 방식으로 작업이 이루어집니다. (*deaths,recovered,confirmed 모두 같은 reponse구조를 지님)

---

타입 정의하기

function fetchCountryInfo(country: string, status: CovidStatus) {
  // country : 국가 이름 들어감
  // params: confirmed, recovered, deaths (3가지만 받음)
  const url = `https://api.covid19api.com/country/${country}/status/${status}`;
  return axios.get(url);
}

다음 API를 호출하는 함수는 fetchCountryInfo 입니다. 이 함수 역시, axios를 호출하여 response를 불러오기 때문에 반환 타입 지정이 필요합니다.

:Promise<AxiosResponse<?>> 형식의 반환 타입을 지정해주고, 이제 제네릭에 해당하는 타입을 정의합니다.

아래 사진은 실제 브라질의 확진자수에 대한 reponse 구조입니다.
따라서 이 배열형 객체의 response 구조에 기반하여 타입을 정의합니다.

타입을 모두 모아놓은 모듈 파일 index.ts에 정의를 합니다.

interface CountrySummaryInfo {
  Country: string;
  CountryCode: string;
  Province: string;
  City: string;
  CityCode: string;
  Lat: string;
  Lon: string;
  Cases: number;
  Status: string;
  Date: string;
} //객체 먼저 정의 

export type CountrySummaryResponse = CountrySummaryInfo[]; //배열형 객체로 type명을 따로 지정하여 export하기 

정의한 CountrySummaryResponse를 import 후 반환타입을 지정합니다.

function fetchCountryInfo(
  country: string,
  status: CovidStatus
): Promise<AxiosResponse<CountrySummaryResponse>> {
  // country : 국가 이름 들어감
  // params: confirmed, recovered, deaths (3가지만 받음)
  const url = `https://api.covid19api.com/country/${country}/status/${status}`;
  return axios.get(url);
}

이렇게 되면 API함수에 대한 타입 정의는 마무리 되게 됩니다. 하지만 여기서 끝이 아니죠

// methods
function startApp() {
  setupData();
  initEvents();
}

// events
function initEvents() {
  rankList.addEventListener('click', handleListClick);
}

async function handleListClick(event: any) {
  // ... (현재 볼 필요가 없는 코드는 삭제함)
  clearDeathList();
  clearRecoveredList();
  startLoadingAnimation();
  isDeathLoading = true;
  const { data: deathResponse } = await fetchCountryInfo(
    selectedId,
    CovidStatus.Deaths
  );
  const { data: recoveredResponse } = await fetchCountryInfo(
    selectedId,
    CovidStatus.Recovered
  );
  const { data: confirmedResponse } = await fetchCountryInfo(
    selectedId,
    CovidStatus.Confirmed
  );
  endLoadingAnimation();
  setTotalDeathsByCountry(deathResponse);
  setTotalRecoveredByCountry(recoveredResponse);
  isDeathLoading = false;
}

handleListClick은 리스트 중 한 국가를 클릭 시, 발생하는 이벤트를 정의한 함수입니다. 이때 각각의 상태값에 따라 불러오는 함수를 비동기 함수(async-await)를 통해 불러오고 data에 deathResponse 와 같이 상태값을 받아서 set함수로 값을 설정하는 프로세스를 거칩니다.

(startApp() 메소드 body에 선언된 setupData()에서 확진자 수와 확진자수를 내림차순으로 랭킹을 보여주는 작업을 불러옴)

---

맞물린 메소드들도 타입 정의하기

따라서 CountrySummaryResponse 와 맞물린 모든 메소드들도 점진적으로 타입을 확장시켜야 합니다.

코드를 잠깐 설명하자면,

• 매개변수 current의 타입을 interface Country로 지정한것은 Country 내부의 속성 중 TotalConfirmed 가 number 타입으로 정의되어 있기 때문에 이를 이용한 것입니다.

• reduce() 함수의 특징은 total과 acculmulator가 존재하는데, 이는 누적함수기 때문에 두 매개변수는 number로 타입을 받습니다. 하지만 우리는 HTML 화면에 innterText로 그려야 하므로, toString()을 통해 숫자 -> 문자 로 변환합니다.

마찬가지로 나라별 확진자수를 내림차순으로 랭킹을 보여주는 메소드도 타입을 정의합니다.

---

마무리

지금까지 특정 parameter를 request로 던져 response를 받아오는 API 함수에 대해 타입을 정의하고 그와 맞물린 메소드들의 타입을 점진적으로 확장시켰습니다.