typeof로 좁히기: 원시값을 가르는 첫 도구

"원시값의 종류를 확인하는 실행 코드가 곧 타입을 좁히는 증거가 돼."

실행 연산자와 타입 분석이 만나는 자리

값에 쓰는 typeof는 실행 중 문자열을 돌려주는 JavaScript 연산자야. TypeScript는 typeof x === 'string' 같은 조건을 읽고 참인 분기에서 x를 string으로 좁혀. 거짓인 분기에서는 원래 유니언에서 string 가능성을 제거한다.

문자열, 숫자, 불리언, undefined, symbol, bigint, 함수처럼 JavaScript가 typeof로 구별하는 범주에 잘 맞아. 특정 객체 모양이나 클래스 인스턴스를 알아내는 도구는 아니므로 타입의 층위에 맞춰 써야 해.

null이라는 오래된 함정

typeof null은 역사적인 이유로 'object'를 돌려줘. 따라서 값이 객체 또는 null일 수 있을 때 typeof x === 'object'만 확인하면 분기 안에 null이 여전히 남아. x !== null 검사를 함께 써야 실제 객체로 좁혀진다.

배열도 typeof 결과가 object야. 배열인지 알아야 한다면 Array.isArray(x)를 써. 실행 연산자가 구별할 수 없는 것을 타입 시스템이 마법처럼 알아낼 수는 없어.

값과 타입에서 서로 다른 두 typeof

Foundations 트랙에서 봤듯 typeof는 두 뜻을 가져. 값 위치에서는 런타임에 원시 분류 문자열을 반환하고, 타입 위치에서는 이미 선언된 값의 정적 타입을 꺼내. 값 위치의 결과는 string, number, boolean, undefined, object, function, symbol, bigint이고, typeof null === 'object'인 현상은 1995년 JavaScript에서 시작된 오래된 호환성 버그야.

typeof는 원시값의 경계를 가르는 도구야. 객체에는 null 검사를 더하고, 배열과 클래스에는 더 정확한 연산자를 골라.

Code

typeof — 옳은 case 와 null 함정·typescript

// Primitive 용 typeof narrowing.
function toUpper(x: string | number): string {
  if (typeof x === 'string') {
    return x.toUpperCase();        // x: string
  }
  return x.toFixed(2);             // x: number
}

// null 함정.
function unsafe(x: { name: string } | null): string {
  if (typeof x === 'object') {
    // x: { name: string } | null  — null 이 여전히 여기!
    return x.name;                 // ❌ Object is possibly 'null'
  }
  return '';
}

function safe(x: { name: string } | null): string {
  if (typeof x === 'object' && x !== null) {
    return x.name;                 // ✅ { name: string } 로 narrow
  }
  return '';
}

Exercise

string | number | null을 받는 describe 함수를 작성해. 문자열이면 'a string', 숫자면 'a number', null이면 'nothing'을 반환하고 각 분기에서 추론된 타입을 확인해.

Hint

객체를 다룰 때는 null이 아닌지 함께 확인해야 해. 문자열과 숫자는 각각의 typeof 분기에서 좁히고, 조건 순서보다 의도가 분명한지를 우선해.

실행 연산자와 타입 분석이 만나는 자리

null이라는 오래된 함정

값과 타입에서 서로 다른 두 typeof

Code

External links

Exercise

Progress

댓글 0