TypeScript 5.8의 패턴 매칭 제안 살펴보기

배경

최근 팀 코드 리뷰에서 복잡한 유니온 타입 분기 처리가 반복적으로 지적됐다. TypeScript 5.8 베타가 나온 김에 패턴 매칭 제안을 검토해봤다.

기존 방식의 문제

type ApiResponse = 
  | { status: 'success'; data: User }
  | { status: 'error'; code: string }
  | { status: 'loading' };

function handleResponse(response: ApiResponse) {
  if (response.status === 'success') {
    return response.data.name;
  } else if (response.status === 'error') {
    console.error(response.code);
  } else {
    // loading case
  }
}

중첩된 if-else가 많아지면 가독성이 떨어진다. 타입 가드를 별도로 만들면 보일러플레이트가 늘어난다.

패턴 매칭 제안

function handleResponse(response: ApiResponse) {
  return match(response) {
    when ({ status: 'success', data }) => data.name,
    when ({ status: 'error', code }) => console.error(code),
    when ({ status: 'loading' }) => null,
  };
}

훨씬 간결하고 의도가 명확하다. 구조 분해가 자동으로 되는 점도 좋다.

실무 적용 검토

아직 제안 단계라 프로덕션에 바로 적용하긴 어렵다. TC39의 패턴 매칭 제안과 연동되는 부분이라 JavaScript 표준이 먼저 확정돼야 할 것 같다.

당장은 기존 방식을 유지하되, 복잡한 분기는 switch문과 타입 가드 조합으로 리팩토링하기로 했다. 5.8 정식 릴리즈 후 다시 검토 예정이다.