2024-01-27 22:13

[TS] Discriminated Union으로 에러처리하기

<이전에 에러처리했던 방법>

https://www.inforum24.com/memos/957

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);
}

createAnsewer() 함수는 IsSuccessResponse, ErrorResponse 두 가지 경우를 리턴할 수 있다.

각 type의 속성과 내부타입은 다음과 같다.

export type IsSuccessResponse = {
  isSuccess: boolean;
  message: string;
};

export type ErrorResponse = {
  code: number;
  message: string;
};

createAnswer()의 response값이 두 가지가 올 수 있기 때문에 아래 코드와 같이 분기 처리를 해주어야 한다.

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();
});

ErrorResponse가 가지고 있는 고유한 속성 "code"를 활용해 if ('code' in res) 와 같이 조건문을 사용해 분기 처리를 해주었다.

그러나 이 방법이 뭔가 마음에 들지 않았다.

마음에 들지 않았던 이유는 가독성이 떨어진다.

처음 코드를 본 사람이 'code' 속성이 있다고 해서 Error Response인지 알기가 어렵다.

type이 정의된 곳에 가서 Error Response에 'code'라는 속성이 있는 것을 확인한 후에야 알 수 있다.

typescript강의를 듣다가 이에 대한 해결방법을 찾을 수 있었다.

Discriminated Union을 사용하면 된다!

<Discriminated Union으로 에러처리하기>

Discriminated Union이란?

Union타입이지만 그 Union type들이 서로 구분(discriminate)할 수 있는 공통적인 property를 가지고 있는 것을 의미한다.

다음과 같이 타입에 result라는 공통적인 property을 추가하고 각 타입마다 고유의 값('success', 'fail')을 정의한다.

(백엔드에서 response를 줄 때 공통적인 property result를 전달해주어야 한다.)

export type IsSuccessResponse = {
  result: 'success';
  isSuccess: boolean;
  message: string;
};

export type ErrorResponse = {
  result: 'fail';
  code: number;
  message: string;
};

그러면 아래 코드와 같이 if (res.result === 'fail') 로 더 가독성 있게 분기 처리를 할 수 있다 :)

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

참조

https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes-func.html#discriminated-unions

Discriminated Union

typescript