01 · Concept

타입 가드와 타입 좁히기

타입 가드는 런타임 검사를 통해 TypeScript가 특정 스코프 내에서 타입을 더 구체적으로 추론하도록 합니다.

TypeScript는 typeof, instanceof, in 연산자를 타입 가드로 인식합니다. 더 복잡한 타입 구분이 필요할 때는 is 키워드를 사용한 사용자 정의 타입 가드를 만들 수 있으며, Discriminated Union 패턴으로 안전한 분기 처리가 가능합니다.

02 · Interactive Demo

타입 좁히기 시각화

각 타입 가드를 선택하고 실행하여 타입이 어떻게 좁혀지는지 확인하세요.

function format(value: string | number): string {
  if (typeof value === "string") {
    // value: string ← 타입 좁히기
    return value.toUpperCase();
  }
  // value: number
  return value.toFixed(2);
}

format("hello"); // "HELLO"
format(3.14159); // "3.14"
Type Narrowing
Before Guard
string | number
guard
→
After Guard
string → string number → number
03 · Code Example

코드 예시

실제 코드로 동작 원리를 확인하세요.

// typeof: 원시 타입 구분
function processValue(value: string | number | boolean) {
  if (typeof value === "string") {
    return value.trim();        // value: string
  }
  if (typeof value === "number") {
    return value.toFixed(2);    // value: number
  }
  return value ? "Yes" : "No";  // value: boolean
}

// instanceof: 클래스 인스턴스 구분
function handleError(error: Error | TypeError | RangeError) {
  if (error instanceof TypeError) {
    console.log("타입 에러:", error.message);
  } else if (error instanceof RangeError) {
    console.log("범위 에러:", error.message);
  } else {
    console.log("일반 에러:", error.message);
  }
}
04 · Interview Point

면접 핵심 질문

타입 가드는 런타임 검사를 통해 특정 스코프 내에서 타입을 좁히는 표현식입니다. TypeScript 컴파일러가 타입 가드를 인식하면 해당 블록 내에서 더 구체적인 타입으로 추론합니다. 내장 타입 가드로 typeof, instanceof, in 연산자가 있으며, 사용자 정의 타입 가드는 is 키워드로 만듭니다.
typeof나 instanceof로 판별할 수 없는 복잡한 타입 구분이 필요할 때 사용합니다. 반환 타입을 paramName is Type 형태로 선언하면, 해당 함수가 true를 반환할 때 TypeScript가 타입을 좁힙니다. 특히 Array.filter()와 함께 사용하면 필터링 결과의 타입이 자동으로 좁혀져 유용합니다.
유니온의 각 멤버가 공통 리터럴 속성(판별자)을 가지는 패턴입니다. switch 문에서 판별자를 기준으로 분기하면 각 케이스에서 타입이 자동으로 좁혀집니다. Redux의 action.type이 대표적인 예입니다. never 타입을 활용한 완전성 검사(exhaustiveness check)로 모든 케이스를 처리했는지 컴파일 타임에 확인할 수 있습니다.