동등 비교로 좁히기: 리터럴 값이 변형을 가를 때

"리터럴과의 엄격한 비교는 값 하나만 좁히는 데서 끝나지 않고, 그 값을 판별 필드로 가진 객체 전체를 열어 줘."

리터럴 하나로 좁혀

x === 'ready'가 참인 분기에서 x는 정확한 리터럴 타입 'ready'가 돼. 원래 타입이 여러 문자열 리터럴의 유니언이었다면 거짓 분기에는 나머지 값만 남는다. 제어 흐름 분석이 각 비교 결과를 이어서 추적해.

이 규칙이 판별 가능한 유니언을 작동시켜. shape.kind === 'circle'을 확인하면 kind뿐 아니라 shape 전체가 원 변형으로 좁혀지고 radius가 안전하게 열린다.

엄격한 동등 비교를 기본으로

==는 JavaScript의 형 변환 규칙을 적용해 '1' == 1 같은 비교를 참으로 만들 수 있어. TypeScript도 그 동작을 고려해 좁히지만 사람에게는 가능한 경우를 추론하기 어렵다. 일반적인 좁히기에는 ===와 !==를 써.

널 검사에서 x == null은 null과 undefined를 함께 잡는 의도적인 관용구로 쓸 수 있어. 팀이 그 의미를 알고 규칙으로 허용한 경우에만 사용하고, 그 밖에는 엄격 비교로 뜻을 분명히 해.

as const 값과 비교해도 좁혀져

const STATUSES = ['idle', 'loading', 'done'] as const처럼 리터럴을 보존해 두면 x === STATUSES[0] 비교에서 x가 'idle'로 좁혀져. 닫힌 값 목록과 엄격 동등 비교를 함께 쓰는 흔한 패턴이야.

판별 필드는 리터럴 타입으로, 비교는 엄격하게. 값의 비교가 객체 전체의 안전한 분기로 이어진다.

Code

Strict equality 와 정당한 `==` 사용 하나·typescript

type Status = 'idle' | 'loading' | 'done' | 'error';

function handle(s: Status): string {
  if (s === 'idle') {
    return 'waiting';           // s: 'idle'
  }
  if (s === 'loading') {
    return 'spinner';           // s: 'loading'
  }
  // 여기서 s 가 'done' | 'error' 로 narrow
  if (s === 'done') {
    return 'check';             // s: 'done'
  }
  return 'cross';               // s: 'error' — 제거로
}

// == null 이 null 과 undefined 둘 다 잡아.
function defaultName(name: string | null | undefined): string {
  if (name == null) {           // null OR undefined match
    return 'anonymous';
  }
  return name;                  // name: string
}

Exercise

네 상태를 가진 Status 합집합과 priority 함수를 만들어. switch 대신 이어진 if 비교로 각 상태에 다른 숫자를 반환해.

Hint

각 상태를 비교해 일찍 반환하면 그 상태가 남은 합집합에서 제거돼. 마지막 분기에는 한 상태만 남는지 에디터에서 확인해.

리터럴 하나로 좁혀

엄격한 동등 비교를 기본으로

as const 값과 비교해도 좁혀져

Code

External links

Exercise

Progress

댓글 0