[TypeScript] Union 타입

Union 타입 기본 개념

Union 타입은 변수에 여러 타입 중 하나의 값이 할당될 수 있음을 의미합니다. 예를 들어, 문자열 또는 불리언값을 모두 허용하는 변수를 선언할 때 Union 타입을 사용할 수 있습니다.

let result: string | boolean;
result = "성공";
console.log(`결과: ${result}`); // 출력: 결과: 성공

result = true;
console.log(`결과: ${result}`); // 출력: 결과: true

함수에서 Union 타입 활용

함수의 매개변수에도 Union 타입을 적용하면, 하나의 함수가 여러 타입의 인자를 처리할 수 있습니다.

function formatValue(value: number | string): string {
  if (typeof value === "number") {
    return `${value}원`;
  }
  return `텍스트: ${value}`;
}

console.log(formatValue(5000));     // 출력: 5000원
console.log(formatValue("안녕"));   // 출력: 텍스트: 안녕

배열과 Union 타입 조합

Union 타입은 배열에도 적용할 수 있습니다.

let mixedList: (string | number)[];
mixedList = ["사과", 3, "바나나", 10];
console.log(mixedList); // 출력: ["사과", 3, "바나나", 10]

// 또는 배열 타입 자체를 Union으로
let dataSet: string[] | boolean[];
dataSet = ["red", "blue"];
console.log(dataSet); // 출력: ["red", "blue"]
dataSet = [true, false];
console.log(dataSet); // 출력: [true, false]

Union 타입과 Enums의 관계

Union 타입은 때때로 열거형(Enums)을 대체할 수 있습니다. Enums는 정해진 상수 집합을 표현하는 데 유용하지만, Union 타입은 보다 간결하게 여러 리터럴 값을 나열할 수 있어 가독성과 유연성이 뛰어납니다.

type Status = "active" | "inactive" | "pending";

function updateUser(status: Status): string {
  return `사용자 상태: ${status}`;
}

console.log(updateUser("active"));   // 출력: 사용자 상태: active
// console.log(updateUser("deleted")); // 오류: "deleted"는 Status에 없음

 

객체와 결합한 Union 타입

type ApiResponse = { success: true; data: string } | { success: false; error: string };

function handleResponse(response: ApiResponse) {
  if (response.success) {
    console.log(`데이터: ${response.data}`);
  } else {
    console.log(`에러: ${response.error}`);
  }
}

handleResponse({ success: true, data: "완료" });      // 출력: 데이터: 완료
handleResponse({ success: false, error: "실패" });    // 출력: 에러: 실패