Equality Narrowing: `===` 와 `==`

"x === 'literal' 이 compiler 가 너의 discriminated union 이 옳게 연결됐는지 검증하는 법."

Narrowing 연산으로서 equality

값을 literal 과 비교가 narrow. if (x === 'red') 분기 안에서 compiler 가 x 가 literal 타입 'red' 인 거 알아. x 가 이전엔 'red' | 'blue' | 'green' 이었으면, 이제 그냥 'red'. else 분기에선 'blue' | 'green'.

이게 discriminated union 이 switch 와 chained if 문에서 작동하게 만드는 operator. if (shape.kind === 'circle') 가 전체 shape object 를 circle variant 로 narrow.

Loose equality (`==`) — 거의 절대 안 써

JavaScript 의 == 가 타입 coercion 수행: '1' == 1 이 true. TypeScript 가 == 를 narrowing operator 로 다루지만, narrowing 이 coercion 규칙 따라 — 혼란스럽고 거의 원하는 거 아냐.

규칙: narrowing 엔 항상 === 써. == 는 명시적 null/undefined 체크 (x == null 이 null AND undefined 둘 다 match — 문맥에 명확한 의도된 idiom) 에만 예약. 그 외엔 strict equality.

`as const` 의 상수와 함께 `===` narrowing

as const 와 equality narrowing 결합이 매우 흔한 패턴. const STATUSES = ['idle', 'loading', 'done'] as const 가 literal 타입 줘. 그다음 어떤 x === STATUSES[0] 이든 x 를 'idle' 로 옳게 narrow.

Strict equality 가 tagged union 의 narrowing 일꾼. Strict 유지; literal 타입 의지; compiler 의 inference 신뢰.

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 가 4개 값의 literal union 인 priority(status: Status): number 함수 써. Chained equality narrowing 써서 각각에 다른 숫자 assign. switch 쓰지 마 — if 체인만. Compiler 가 체인 통해 옳게 narrow 하는지 확인.

Hint

각 if (s === '...') return 후 compiler 가 그 variant 를 s 의 타입에서 제거. 마지막 분기 시점엔 한 variant 만 남아 — compiler 가 어느 거인지 알아.

Equality Narrowing: `===` 와 `==`

Narrowing 연산으로서 equality

Loose equality (`==`) — 거의 절대 안 써

`as const` 의 상수와 함께 `===` narrowing

Code

External links

Exercise

Progress

댓글 0

Narrowing 연산으로서 equality

Loose equality (==) — 거의 절대 안 써

as const 의 상수와 함께 === narrowing

Code

External links

Exercise

Progress

Loose equality (`==`) — 거의 절대 안 써

`as const` 의 상수와 함께 `===` narrowing