TypeScript 3.7의 Optional Chaining 도입기

배경

회사 프로젝트에서 TypeScript를 3.7로 업그레이드했다. 가장 큰 목적은 Optional Chaining(?.)과 Nullish Coalescing(??) 지원이었다. 특히 API 응답 처리 코드에서 중첩된 null 체크가 많아 가독성이 떨어지는 문제가 있었다.

기존 코드의 문제

const userName = user && user.profile && user.profile.name || 'Unknown';
const firstTag = data && data.items && data.items[0] && data.items[0].tags && data.items[0].tags[0];

이런 식으로 && 체이닝이 길어지면 실수하기 쉽고, 코드 리뷰에서도 놓치는 경우가 있었다.

Optional Chaining 적용

const userName = user?.profile?.name ?? 'Unknown';
const firstTag = data?.items?.[0]?.tags?.[0];

훨씬 간결해졌다. 배열 접근도 ?.[index] 형태로 지원되고, 함수 호출도 func?.() 로 가능하다.

실제 적용 사례

API 응답 처리 유틸 함수를 리팩토링했다.

interface ApiResponse {
  data?: {
    user?: {
      settings?: {
        theme?: string;
      };
    };
  };
}

function getUserTheme(response: ApiResponse): string {
  return response.data?.user?.settings?.theme ?? 'light';
}

주의사항

|| 대신 ??를 써야 하는 경우가 많다. 0, '', false를 유효한 값으로 처리해야 할 때 ||를 쓰면 의도와 다르게 동작한다.

const count = data?.count ?? 0;  // 올바름
const count = data?.count || 0;  // count가 0일 때도 fallback

마이그레이션 팁

전체 코드베이스를 한번에 바꾸지 않고, 새로 작성하는 코드부터 적용했다. ESLint 규칙으로 no-unused-expressions가 Optional Chaining과 충돌할 수 있어 설정을 조정했다.

TypeScript 3.7 업그레이드 후 코드 가독성이 확실히 개선됐다. 특히 API 레이어 코드가 깔끔해져서 만족스럽다.