문법 · TS · beginner

좁히기·가드: typeof, in, 판별 유니온

유니온을 안전하게 좁혀 런타임 오류를 줄이는 패턴.

배우기 · TypeScript 문법 · 14분 · 3/7 · typescript · 좁히기

이 트랙 목차 (7)
  1. 1. 타입 주석·유니온·좁히기
  2. 2. interface · type · 제네릭 맛보기
  3. 3. 좁히기·가드: typeof, in, 판별 유니온
  4. 4. 배열·제네릭 함수 스케치
  5. 5. optional과 nullish: ?. ?? !
  6. 6. Promise와 async 함수 타입
  7. 7. 튜플·readonly 감각

왜 좁히나

TypeScript의 핵심은 “이 시점에서 값이 무엇일 수 있는가”를 좁히는 일입니다.
string | number를 그대로 더하면 컴파일러가 막습니다. 분기 안에서만 연산하세요.

typeof

function len(x: string | string[]): number {
  if (typeof x === 'string') return x.length;
  return x.length; // string[]
}

typeof null === 'object' 함정은 그대로입니다. null은 따로 거르세요.

in / 프로퍼티 검사

type A = { kind: 'a'; n: number };
type B = { kind: 'b'; s: string };

function f(x: A | B) {
  if (x.kind === 'a') return x.n;
  return x.s.length;
}

kind처럼 공통 리터럴 필드(판별 유니온)가 가장 읽기 쉽습니다.

사용자 정의 타입 가드

function isNum(x: unknown): x is number {
  return typeof x === 'number' && Number.isFinite(x);
}

unknown 입력을 다룰 때 유용합니다. 코딩 테스트 입력은 보통 문자열이므로, 파싱 직후에 가드를 두는 편이 안전합니다.

문제에서

TS 문제는 타입이 정답을 대신해 주지 않습니다.
런타임 동작은 JS와 같고, 타입은 실수 방지용입니다. as로 우회하기보다 분기를 쓰세요.

연습

연습장에서 string | number 입력을 받아 숫자면 제곱, 문자열이면 길이를 반환하는 solve를 만들어 보세요.

체크리스트

  1. 유니온인가? → 공통 판별 필드 또는 typeof
  2. null/undefined 가능한가? → 먼저 가드
  3. unknown인가? → 가드 함수로만 사용
  4. as가 필요해 보이나? → 대부분 분기로 대체 가능

한 줄: 좁힌 뒤에만 연산한다.

관련 짧은 원리

관련 문제