[typescript] 객체 타입 유니언 사용법

Published: at 12:00 AM

객체 타입 역시 유니언으로 사용할 수 있다.

type PoemWithPages = {
  name: string;
  pages: number;
};

type PoemWithRhymes = {
  name: string;
  rhymes: boolean;
};

type Poem = PoemWithPages | PoemWithRhymes;

const poem: Poem =
  Math.random() > 0.5
    ? { name: "The Double Image", pages: 7 }
    : { name: "Her Kind", rhymes: true };

공통 속성

객체 타입 유니언은 해당 타입의 공통된 속성에 대한 접근만 허용된다.

poem.name; // OK

공통되지 않은 속성

공통되지 않은 속성에 접근하면 에러가 발생한다.

poem.pages; // Error

객체 타입 유니언 사용법 : 타입 내로잉 Typing narrowing

공통되지 않은 속성에 대해서는 직접 접근이 되지 않는다.

따라서 이를 접근하기 위해서는 타입 내로잉 typing narrowing을 통해서 특정 타입으로 좁혀야 해당 타입에 존재하는 속성을 접근할 수 있다.

if ("pages" in poem) {
  poem.pages; // PoemWithPages 타입
} else {
  poem.rhymes; // PoemWithRhymes 타입
}

Discriminated Unions

개인적으로는 Union 사용 시에는 가능하다면 Discriminated Unions을 즐겨 사용한다.

서로 shape 이 너무 다르면 type narrowing 하는 것이 쉽지 않을 수 있으므로, 공통된 필드를 discriminator 로 구분할 있도록 서로 다른 값을 할당한 union 을 사용하는 것이 좋다.

interface MessageEvent {
  type: "message"; // discriminator
  content: string;
  senderId: string;
}

interface AlarmEvent {
  type: "alarm"; // discriminator
  severity: "low" | "medium" | "high";
  timestamp: Date;
}

Reference