[TypeScript] 서로소 유니온 타입 : 묶어서 선언할 때 유의할 점

아래 예제에서 1번 방법을 이용하면, 아래 사항을 알 수 없다.

• Failed의 경우에 Error가 포함된다는 점
• Success에서 response가 포함된다는 점

그래서 processResult 함수에서도 task.error? 나 task.error!와 같이 그 프로퍼티 있어!하고 추가로 얘기를 해줘야 한다.

 

그래서 2번 방법과 같이, 각 타입을 정의하고 해당 타입을 |으로 엮어서 서로소 유니온 타입을 표현하는 것이 가독성과 관리 면에서 더 좋다.

// 비동기 작업의 결과를 처리하는 객체

// 1️⃣번 방법
type AsyncTask = {
  state: "SUCCESS" | "FAILED" | "LOADING";
  error?: { ... };
  response?: { ... };
};

// 2️⃣번 방법
type LoadingTask = {
  state: "LOADING";
};
type FailedTask = {
  state: "FAILED";
  error: {
    message: string;
  };
};
type SuccessTask = {
  state: "SUCCESS";
  response: {
    data: string;
  };
};
type AsyncTask = LoadingTask | FailedTask | SuccessTask; //서로소 유니언 타입이다!

// 로딩중 -> 콘솔에 로딩중 출력
// 실패 -> 실패 : 에러메세지 출력
// 성공 -> 성공 : 데이터를 출력
function processResult(task: AsyncTask) {
  switch (task.state) {
    case "LOADING": {
      console.log(`로딩 중`);
      break;
    }
    case "FAILED": {
      console.log(`에러발생 : ${task.error.message}`);
      break;
    }
    case "SUCCESS": {
      console.log(`성공 : ${task.response.data}`);
      break;
    }
  }
}