2023-10-16 23:47

[TS] 에러처리하기

typescript에서 API를 정의할 때 response 타입을 백엔드에서 보내주는 IsSuccessResponse와 ErrorResponse 2가지를 정의해야 했다.

각각의 타입은 다음과 같다

IsSuccessResponse = {isSuccess:boolean, message:string}

ErrorResponse = {code:number, message:string}

export async function createAnswer(
  questionId: number,
  text: string
): Promise<IsSuccessResponse | ErrorResponse> {
  return fetch(
    `${process.env.url}/answers?questionId=${questionId}`,
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      credentials: 'include',
      body: JSON.stringify({ text }),
    }
  )
    .then((res) => res.json())
    .catch(console.error);
}

Promise<IsSiccessResponse | ErrorResponse>

다음과 같이 union type(|)으로 response type을 정의했다

그럼 createAnswer을 사용하는 곳을 봐보자

createAnswer(questionId, questionText).then((res) => {
	if ('code' in res) {
		if (res.code === 401) router.push('/login');
		notifyToast(res.message, 'error');
        return;
	}
	editor?.commands.setContent('');
	notifyToast(res.message, 'success');
    router.refresh();
});

res 값은 두 가지가 올 수 있는데 res에 따라 해야하는 행동이 다르기 때문에 나눠줘야한다

if ('code' in res) 가 나눠주는 역할을 하고 있다.

'code'라는 값은 ErrorResponse에만 있는 속성이기 때문에 다음 조건문은 ErrorResponse를 받았을 때 처리하는 공간이고 조건문 밑 부분이 isSuccessReponse를 처리하는 공간이다.

typescript