판별 유니언

판별 유니언(discriminated union)은 모든 갈래가 같은 이름의 속성을 갖고, 그 속성의 값이 갈래마다 다른 리터럴인 유니언입니다. 그 속성 하나만 확인하면 값이 어느 갈래인지 가를 수 있습니다. 갈래를 가르는 이 속성을 이 과목에서는 갈래 속성(discriminant property)이라고 부릅니다.

카페 주문에는 추가 금액이 있는 음료와 없는 음식이 섞여 들어옵니다. 두 타입을 유니언 Drink | Food로 받으면 검사기는 둘이 함께 가진 속성만 쓰게 합니다(유니언 — 여럿 가운데 하나). 추가 금액을 쓰려면 음료인지 먼저 확인해 좁혀야 하는데, 객체는 typeof가 모두 'object'라 음료와 음식을 가르지 못합니다. 그래서 갈래마다 값이 다른 속성을 하나 두고, 그 값을 확인합니다.

이 단원을 이미 안다면 단원 연습 문제의 진단 문항부터 풀고 틀린 레슨만 보세요.

Order = Drink | Food …function cost(o: Order) {  if (o.kind === 'drink') {    return o.price + o.extra;  }  return o.price + o.extra;}

Order = Drink | Food …function cost(o: Order) {  if (o.kind === 'drink') {    return o.price + o.extra;  }  return o.price + o.extra;}

Order = Drink | Food …function cost(o: Order) {  if (o.kind === 'drink') {    return o.price + o.extra;  }  return o.price + o.extra;}

Order = Drink | Food …function cost(o: Order) {  if (o.kind === 'drink') {    return o.price + o.extra;  }  return o.price + o.extra;}

Order = Drink | Food …function cost(o: Order) {  if (o.kind === 'drink') {    return o.price + o.extra;  }  return o.price + o.extra;}

Order = Drink | Food …function cost(o: Order) {  if (o.kind === 'drink') {    return o.price + o.extra;  }  return o.price + o.extra;}

Order = Drink | Food …function cost(o: Order) {  if (o.kind === 'drink') {    return o.price + o.extra;  }  return o.price + o.extra;}

1갈래 속성 — 갈래마다 값이 하나뿐인 속성

음료와 음식 주문의 타입입니다. 두 interface 모두 kind 속성을 가졌고, 그 타입은 값 하나짜리 리터럴 타입입니다(리터럴 유니언으로 값 고르기).

interface Drink {
  kind: 'drink';
  price: number;
  extra: number;
}
interface Food {
  kind: 'food';
  price: number;
}
type Order = Drink | Food;

Drink의 kind 자리에는 'drink'만, Food의 kind 자리에는 'food'만 들어가, kind 값을 보면 어느 갈래인지 정해집니다. 이것이 갈래 속성입니다. 자료에 따라 판별 속성, 판별 유니언은 식별 유니언이나 태그된 유니언(tagged union)이라고도 부릅니다.

앞 코드에 이어, 주문 하나의 금액을 돌려줄 cost를 씁니다.

function cost(o: Order) {
  return o.price + o.extra;
}

main.ts(12,22): error TS2339: Property 'extra' does not exist on type 'Order'.  Property 'extra' does not exist on type 'Food'.

11번 줄에서 o의 지금 타입은 Order, 곧 Drink | Food입니다. 두 타입이 함께 가진 kind와 price는 확인 없이도 쓰지만, extra는 Drink에만 있습니다. 유니언 레슨에서 본 TS2339입니다. 들여 쓴 둘째 줄이 까닭을 말합니다 — o는 Food일 수도 있는데 Food에는 extra가 없습니다.

2갈래 속성을 확인하면 그 갈래로 좁혀진다

o.kind === 'drink'가 참인 갈래에는 kind가 'drink'인 값, 곧 Drink만 올 수 있어 검사기는 그 갈래에서 o를 Drink로 좁혀 봅니다. typeof 대신 갈래 속성을 확인했을 뿐, 좁히기 — typeof와 타입 추적 표에서 본 좁히기와 같습니다(검사 규칙 5).

interface Drink {
  kind: 'drink';
  price: number;
  extra: number;
}
interface Food {
  kind: 'food';
  price: number;
}
type Order = Drink | Food;

1절과 같은 타입 선언에 이어 cost를 if로 씁니다. 이 코드는 검사를 지날까요? 막힌다면 몇 번 줄일까요?

function cost(o: Order) {
  if (o.kind === 'drink') {
    return o.price + o.extra;
  }
  return o.price + o.extra;
}

main.ts(15,22): error TS2339: Property 'extra' does not exist on type 'Food'.

3switch로 갈래마다 나누기

JS 다시 보기: switch는 값이 === 연산자로 같은 case부터 break나 return을 만날 때까지 실행합니다(JS 'switch와 조건 연산자').

interface Drink {
  kind: 'drink';
  price: number;
  extra: number;
}
interface Food {
  kind: 'food';
  price: number;
}
type Order = Drink | Food;

1절과 같은 타입 선언에 이어 cost를 switch로 씁니다. 검사 오류가 없습니다.

function cost(o: Order) {
  switch (o.kind) {
    case 'drink':
      return o.price + o.extra;
    case 'food':
      return o.price;
  }
}

case 'drink':도 o.kind === 'drink'와 같은 확인이라, 검사기는 case마다 그 아래 줄에서 o를 그 갈래로 좁힙니다. 어느 case로 갈지는 실행할 때 값이 정하지만, 검사기는 값을 모르니 case 아래 줄을 모두 읽습니다(검사 규칙 5).

예제

타입 추적 표로 갈래 읽기

3절의 cost를 좁히기 레슨에서 배운 타입 추적 표로 씁니다. case마다 갈래 안의 지금 타입을 적고, 갈래가 끝나는 줄도 빼지 않습니다 — 반만 쓴 표는 안 쓴 것과 같습니다.

14번 줄의 o.extra는 Drink에 있어 지나갑니다. 16번 줄에서 o.extra를 썼다면 2절과 같은 TS2339로 막힙니다. 두 길이 모두 return으로 끝나 switch 뒤로 오는 길이 없으니, 만나는 줄 행은 쓸 것이 없습니다.

자주 틀리는 곳

틀린 생각: 음료와 음식을 한 interface에 담고, 한쪽에만 있는 속성은 ?로 두면 된다.

속성 하나만 다르니 한 타입에 extra?: number를 두는 쪽이 짧아 보입니다.

interface Order {
  kind: string;
  price: number;
  extra?: number;
}

function cost(o: Order) {
  if (o.kind === 'drink') {
    return o.price + o.extra;
  }
  return o.price;
}

main.ts(9,22): error TS18048: 'o.extra' is possibly 'undefined'.

8번 줄에서 kind를 확인해도 o는 같은 Order 하나라, 9번 줄의 o.extra는 그대로 number | undefined입니다. 음료인데 extra를 빠뜨린 값도 이 타입에 들어갑니다.

맞는 규칙: 한 타입 안의 선택 속성은 다른 속성(kind)을 확인해도 undefined가 든 타입 그대로라, 갈래를 확인해도 그 속성이 있다고 좁혀지지 않습니다(검사 규칙 5). 갈래마다 속성이 다르면 갈래마다 interface를 따로 두고 갈래 속성으로 묶습니다.

틀린 생각: 갈래 속성은 kind: string으로 적어도 된다.

값이 글자이니 타입도 string이면 될 것 같습니다. 그러나 string은 모든 글자의 모음이라, 두 갈래의 kind가 같은 모음이 됩니다.

interface Drink {
  kind: string;
  price: number;
  extra: number;
}
interface Food {
  kind: string;
  price: number;
}
type Order = Drink | Food;

앞 코드에 이어 2절의 cost를 씁니다.

function cost(o: Order) {
  if (o.kind === 'drink') {
    return o.price + o.extra;
  }
  return o.price;
}

main.ts(13,24): error TS2339: Property 'extra' does not exist on type 'Order'.  Property 'extra' does not exist on type 'Food'.

Food의 kind도 'drink'일 수 있으니, 12번 줄의 확인이 참이어도 o는 Order 그대로입니다.

맞는 규칙: 갈래 속성은 갈래마다 값 하나짜리 리터럴 타입('drink'·'food')으로 적습니다. 그래야 그 값을 확인한 갈래에 한 타입만 남습니다(검사 규칙 5).

틀린 생각: 갈래 값은 대소문자가 달라도 같은 갈래로 본다.

사람에게는 'Drink'와 'drink'가 같은 말이지만, 검사기에게 'drink' 자리는 그 글자 하나의 모음입니다.

interface Drink {
  kind: 'drink';
  price: number;
  extra: number;
}
interface Food {
  kind: 'food';
  price: number;
}
type Order = Drink | Food;

1절과 같은 타입 선언에 이어 라테 주문을 만듭니다.

const latte: Order = {
  kind: 'Drink',
  price: 4500,
  extra: 500,
};

main.ts(12,3): error TS2820: Type '"Drink"' is not assignable to type '"drink" | "food"'. Did you mean '"drink"'?

'Drink' 값을 "drink" | "food" 자리에 넣을 수 없다는 TS2820이고, 끝의 Did you mean은 검사기의 짐작입니다. 확인하는 쪽에서 o.kind === 'Drink'로 잘못 써도 TS2367(두 타입에 겹치는 값이 없다)로 막힙니다.

맞는 규칙: 리터럴 타입 'drink'는 그 글자 하나만 든 모음이라, 대소문자가 다른 'Drink'는 들어가지 못합니다(검사 규칙 2). 갈래 값은 interface에 적은 글자 그대로 씁니다.

틀린 생각: case를 하나 빠뜨리면 검사기가 그 switch에서 알려 준다.

3절 cost에서 case 'food': 두 줄을 지워도 검사 오류가 없습니다. 음식 주문은 switch를 지나 함수 끝에 닿아 undefined를 돌려주고, 검사기는 cost가 돌려주는 타입에 undefined를 더할 뿐입니다(number | undefined). 플레이그라운드에서는 TS7030(모든 길이 값을 돌려주지는 않는다)이 나옵니다. 이 과목 설정에서 꺼 둔 검사(noImplicitReturns)를 켜 두었기 때문입니다.

맞는 규칙: 검사기는 맡는 case가 없는 갈래를 오류로 보지 않습니다. 그 갈래는 switch를 지나갈 뿐입니다. 빠진 갈래를 알려 달라고 하는 법은 빠짐없이 — never로 갈래 검사에서 배웁니다.

확인 문제

1. 2절 코드에서 12번 줄의 'drink'만 'food'로 바꿨습니다. 타입 선언은 2절과 같습니다. 검사를 지날까요? 막힌다면 몇 번 줄일까요?

interface Drink {
  kind: 'drink';
  price: number;
  extra: number;
}
interface Food {
  kind: 'food';
  price: number;
}
type Order = Drink | Food;

앞 코드에 이어 바꾼 cost를 씁니다.

function cost(o: Order) {
  if (o.kind === 'food') {
    return o.price + o.extra;
  }
  return o.price + o.extra;
}

main.ts(13,24): error TS2339: Property 'extra' does not exist on type 'Food'.

2. 원두를 무게로 파는 주문 Bean을 판별 유니언에 더하려 합니다. 빈칸에 들어갈 갈래 속성의 타입을 쓰세요.

interface Bean {
  kind: ____;
  price: number;
  grams: number;
}
type Order =
  | Drink
  | Food
  | Bean;

3. 장보기 목록입니다. 과일은 무게(kg)로, 묶음 상품은 개수로 잽니다. 이 코드는 11번 줄에서 막힙니다. 과일에 없는 개수를 만들지 않고 고치는 길을 고르세요.

interface Fruit {
  kind: 'fruit';
  kg: number;
}
interface Pack {
  kind: 'pack';
  count: number;
}
type Item = Fruit | Pack;
function size(i: Item) {
  return i.count + '개';
}

main.ts(11,12): error TS2339: Property 'count' does not exist on type 'Item'.  Property 'count' does not exist on type 'Fruit'.

• ① if (i.kind === 'pack')⁠로 확인한 갈래에서만 i.count를 쓰고, 나머지 갈래는 i.kg로 돌려준다.
• ② Fruit에도 count: number를 더한다.
• ③ 두 interface의 kind를 string으로 바꾼다.

interface Fruit {
  kind: 'fruit';
  kg: number;
}
interface Pack {
  kind: 'pack';
  count: number;
}
type Item = Fruit | Pack;
function size(i: Item) {
  if (i.kind === 'pack') {
    return i.count + '개';
  }
  return i.kg + 'kg';
}

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 3절의 타입 선언과 cost를 main.ts로 저장하고 npx tsc로 검사합니다. 아무것도 찍히지 않으면 검사 오류가 없는 것입니다. 그다음 7번 줄의 kind: 'food'를 kind: 'drink'로 바꾸면 몇 번 줄에서 막힐지 먼저 적고, 다시 검사해 맞춰 봅니다. 검사하고 돌리는 법은 내 컴퓨터에서 검사하고 돌리기에 있습니다.