TypeScript기본 타입과 좁히기

narrowing과 타입 가드

union 타입 값을 실제 분기 조건으로 좁혀 안전하게 사용하는 narrowing의 핵심 패턴을 정리합니다.

마지막 수정 2026년 3월 19일

기본 패턴

ts
function printId(id: string | number) {
  if (typeof id === "string") {
    console.log(id.toUpperCase());
  } else {
    console.log(id.toFixed(0));
  }
}

설명

  • narrowing은 분기 조건을 통해 값의 가능한 타입 범위를 더 좁게 만드는 과정입니다.
  • typeof, instanceof, "prop" in obj, 엄격 비교, 사용자 정의 타입 가드 함수가 대표적인 도구입니다.
  • TypeScript는 제어 흐름을 따라가며, 특정 분기 안에서 값의 타입이 더 구체적이라고 추론합니다.
  • 그래서 union 타입은 선언만으로 끝나지 않고, 실제 사용하는 위치에서 narrowing과 함께 설계해야 제대로 힘을 냅니다.
  • 이 메커니즘을 이해하면 unknown, API 응답, 상태 객체 같은 복잡한 값도 훨씬 안전하게 다룰 수 있습니다.

짧은 예제

ts
type Result =
  | { ok: true; value: string }
  | { ok: false; error: Error };

function handle(result: Result) {
  if (result.ok) {
    return result.value.toUpperCase();
  }

  return result.error.message;
}

빠른 정리

도구좁히는 방식
typeof원시 타입 분기
instanceof클래스 인스턴스 분기
in특정 프로퍼티 존재 여부 분기
비교식literal 값 분기
사용자 정의 가드재사용 가능한 확인 로직

주의할 점

분기 조건이 곧 타입 설계의 일부라고 생각하는 편이 좋습니다. 특히 union을 많이 쓸수록 "어떻게 좁힐 것인가"를 함께 설계해야 코드가 깔끔해집니다.

참고 링크

1 sources