[TS] fetch API return type

타입스크립트로 개발을 해오면서 매개변수는 어떤 타입을 받아야하고, 함수는 입력에 따른 출력으로 어떤 타입을 리턴해야하는지 명시하여 코드의 안정성을 높히며 사용을 한다.

이번 포스팅은 컴포넌트 내에서는 당연하게 생각하였던 부분들이 API 로직을 사용하는 부분에서는 별도로 return type을 명시하지 않았던 지난 날을 반성하며 잊어 먹지 않기 위해 포스팅하려 한다.

---

간단하게 어떤 value 값을 받아 http 요청을 보내고 이에 대한 응답을 받는 async/await을 사용한
fetch api 기본 로직이다.

const testAPI = async (value: string) => {
  try {
    const res = await fetch(
      `blabalURL...key=${value}`,
    );

    if (res.ok) {
      return await res.json();
    }

    throw new Error('API Error');
  } catch (e: unknown) {
    alert(e);
  }
};

fetch의 경우 디폴트 값은 'GET' 방식으로 옵션을 따로 설정하지 않았다.

위에서 언급했던 바와 같이 어떠한 입력으로 발생하는 출력 결과, 즉 return 값에 대한 타입을 정의해주며 사용한다.

그런데 항상 보면 API 로직에서는 return 값을 정의하지 않고 사용을 해왔다.

이러한 놓쳤던 부분을 상기하고, 이제부터라도 더 꼼꼼하게 타입스크리브를 사용해보려 한다.

---

위와 같은 로직에서 return 값을 정의해주는 방법은 크게 2가지가 있다.

1. 함수의 리턴 타입 추론

const testAPI = async (value: string): Promise<ITestInterface> => {
  try {
    const res = await fetch(
      `blabalURL...key=${value}`,
    );

    if (res.ok) {
      return await res.json();
    }

    throw new Error('API Error');
  } catch (e: unknown) {
    alert(e);
  }
};

---

2. as 다운 캐스팅

여기서 캐스팅이란?

형변환을 뜻하는 용어로 업캐스팅과 다운캐스팅이라는 개념이 있다고 한다.

업캐스팅 - 자식 클래스가 부모 클래스의 타입으로 캐스팅되는 경우

다운캐스팅 - 부모 클래스가 자식 클래스의 타입으로 캐스팅 되는 경우가 있다.

보통 명시적으로 타입을 선언해주는 경우!! (return, 지금이 그렇다)

as 키워드를 사용하여 타입을 강제하지 않는다.

그렇기에 아래 방법보다는 위의 함수의 리턴 타입을 명시적으로 정의해주 방법이 더 좋은 방법이라고 생각한다.

const testAPI = async (value: string) => {
  try {
    const res = await fetch(
      `blabalURL...key=${value}`,
    );

    if (res.ok) {
      return (await res.json() as Promise<ITestInterface>);
    }

    throw new Error('API Error');
  } catch (e: unknown) {
    alert(e);
  }
};