TypeScript 4.4 의 Control Flow Analysis 개선 사항

배경

프로젝트에서 TypeScript를 4.3에서 4.4로 업그레이드했다. 릴리즈 노트를 보니 Control Flow Analysis가 개선되었다고 해서 실제로 어떤 변화가 있는지 확인해봤다.

개선된 타입 좁히기

이전 버전에서는 조건문을 변수로 추출하면 타입 좁히기가 제대로 동작하지 않았다.

interface User {
  name: string;
  email?: string;
}

function sendEmail(user: User) {
  const hasEmail = user.email !== undefined;
  
  if (hasEmail) {
    // TS 4.3: user.email은 여전히 string | undefined
    // TS 4.4: user.email이 string으로 좁혀짐
    console.log(user.email.toLowerCase());
  }
}

4.4부터는 aliased condition을 통해서도 타입 좁히기가 정상 작동한다.

Discriminated Union 개선

type Result<T> = 
  | { success: true; data: T }
  | { success: false; error: string };

function handleResult(result: Result<number>) {
  const isSuccess = result.success;
  
  if (isSuccess) {
    // 이제 result.data 접근 가능
    console.log(result.data * 2);
  } else {
    console.log(result.error);
  }
}

실제 프로젝트의 API 응답 처리 코드에서 이런 패턴을 많이 사용하고 있어서 리팩토링 여지가 생겼다.

실무 적용

조건문을 함수로 추출하는 경우가 많은데, 이제 타입 가드 함수 없이도 자연스럽게 타입이 좁혀진다. 코드 가독성이 개선되면서도 타입 안전성을 유지할 수 있게 되었다.

다만 모든 경우에 동작하는 건 아니라서, 복잡한 로직에서는 여전히 명시적인 타입 가드가 필요했다.