[Typescript] 유니언 타입과 교차 타입

유니언 타입 (Union Types)

하나의 매개변수에 두 가지 타입을 기대할 경우에 아래처럼 사용된다. 여러 타입을 기대할 때, any 타입을 사용할 수 있지만 최대한 좁혀서 타입 범위를 고정해놓는 것이 로직 운영에 도움이 된다.

const example = (value: string | number) => {
    if (typeof value === "string") return ...
    if (typeof value === "number") return ...
}

공통 필드를 갖는 유니언

유니언 타입인 값이 있으면, 설정된 모든 타입에 공통인 요소만 접근할 수 있다.

interface Bird {
  fly(): void;
  layEggs(): void;
}

interface Fish {
  swim(): void;
  layEggs(): void;
}

declare function getSmallPet(): Fish | Bird;

let pet = getSmallPet();

pet.layEggs();  // O 공통적으로 가지고 있는 요소
pet.swim();  // X Fish에만 존재

유니언 구별하기 (Discriminating Unions)

유니언 타입은 일반적으로 리터럴 타입을 갖는 단일 필드를 사용하며, 조건문을 통해 타입을 좁혀나갈 수 있다.

type NetworkLoadingState = { state: "loading" };

type NetworkFailedState = {
  state: "failed";
  code: number;
};

type NetworkSuccessState = {
  state: "success";
  response: {
    title: string;
    duration: number;
    summary: string;
  };
};

type NetworkState =
  | NetworkLoadingState
  | NetworkFailedState
  | NetworkSuccessState;

const networkStatus = (params: NetworkState) => {
  switch (params.state) {
    case "loading":
      return "Downloading...";
    case "failed":
      return `Error ${params.code} downloading`;
    case "success":
      return `Downloaded ${params.response.title} - ${params.response.summary}`;
  }
}

교차 타입 (Intersection Types)

교차 타입은 유니언 타입과 밀접한 관련이 있지만, 사용 방법은 매우 다르다. 여러 타입을 하나로 결합하며 필요한 기능을 모두 가진 단입 타입을 얻을 수 있다.

interface ErrorHandling {
  success: boolean;
  error?: { message: string };
}

interface ArtworksData {
  artworks: { title: string }[];
}

interface ArtistsData {
  artists: { name: string }[];
}

type ArtworksResponse = ArtworksData & ErrorHandling;
type ArtistsResponse = ArtistsData & ErrorHandling;

const handleArtistsResponse = (response: ArtistsResponse) => {
    console.error(response.error?.message);
};