유니온 타입(Union Type)이란? 활용법과 주의사항 정리

💬 최근 회사에서 코드 리뷰 중에 타입을 지정한 부분에서 유니온 타입을 사용하는 게 좋겠다는 의견을 들었다. 그러다 문득, "유니온 타입이 뭐지?"라는 생각이 들어 찾아보게 되었다.

알고 보니, 평소 자주 사용하던 타입 정의 방식이었다. 나처럼 사용은 하지만 정확한 정의를 모르는 사람에게 도움이 됐으면 좋겠다는 마음으로 이 글을 작성해 본다. 😊

---

Union Type(유니온 타입)이란?

유니온 타입은 A이거나 B와 같이, 여러 타입 중 하나를 허용하는 타입이다. 자바스크립트의 OR 연산자(||)와 유사한 개념이다.

Union Type

유니온 타입이란, 자바스크립트의 OR 연산자(||)와 같이 A이거나 B이다를 말하는 타입이다.

let name: string | number; // 문자열 또는 숫자 타입 허용
name = "John";  // 가능
name = 42;      // 가능

 

위 코드에서 name은 문자열(string) 또는 숫자(number) 타입을 가질 수 있다. | 연산자를 사용해 여러 타입을 연결하는 방식이 바로 유니온 타입이다.

---

왜 any 대신 유니온 타입을 사용할까?

유니온 타입은 타입스크립트의 강점을 살릴 수 있다.

any 타입의 문제

any를 사용하면 타입 검증이 사라지고, 자바스크립트를 사용할 때와 별반 다를 바 없게 된다. 예를 들어,

let name: any = "John";
name.toUpperCase(); // 정상 작동하지만, 자동 완성 지원 X

 

any로 지정된 경우, 문자열 관련 API(예: toUpperCase)에 대한 자동 완성을 받을 수 없다.

유니온 타입의 장점

반면, 유니온 타입을 사용하면 타입스크립트의 자동 완성 기능을 활용할 수 있다.

let name: string | number = "John";
name.toUpperCase(); // 자동 완성 가능

 

유니온 타입은 타입스크립트를 사용하는 이유를 살리면서, 다양한 타입을 선언할 수 있는 유용한 방법이다.

---

유니온 타입을 사용할 때 주의할 점

유니온 타입을 사용할 때는 공통 속성만 접근 가능하다는 점에 유의해야 한다.

 

예시

type Content = { name: string; cont: string };
type List = { name: string; id: number };

function data(): Content | List {
  return { name: "John", cont: "Content" };
}

const result = data();
console.log(result.name); // 가능
console.log(result.cont); // 오류 발생

 

위 코드에서 data() 함수는 Content 타입 또는 List 타입을 반환한다. 하지만 타입스크립트는 반환값이 어떤 타입인지 정확히 알 수 없기 때문에, 두 타입의 공통 속성(name)만 접근 가능하다.

cont나 id에 접근하려고 하면 타입 오류가 발생한다.

자동 완성 확인

data() 함수 내에서 result.를 입력하면 자동 완성 목록에 name만 나오는 것을 확인할 수 있다. 타입스크립트는 두 타입의 공통 속성만 안전하게 접근 가능하다고 판단하기 때문이다.

---

상수 열거와 유니온 타입 활용

이번 코드 리뷰를 통해 새롭게 알게 된 점은 상수를 유니온 타입으로 열거할 수 있다는 것이다.

 

예시: 문자열 상수 열거

type ContentType = "MARKDOWN" | "HTML";

let contentType: ContentType;
contentType = "MARKDOWN"; // 가능
contentType = "HTML";     // 가능
contentType = "TEXT";     // 오류

 

서버에서 데이터를 받아올 때 contentType이 "MARKDOWN" 또는 "HTML"이라는 값으로 전달되는 경우, 단순히 string 타입을 사용할 필요 없이 상수를 유니온 타입으로 정의할 수 있다. 타입 안정성을 높이는 데 매우 유용하다.

---

정리하자면!

• 유니온 타입은 여러 타입 중 하나를 허용하는 타입이다.
• any 대신 유니온 타입을 사용하면 자동 완성과 타입 안정성을 유지할 수 있다.
• 하지만 유니온 타입에서는 공통 속성만 접근 가능하다는 점에 유의해야 한다.
• 문자열 상수도 유니온 타입으로 정의할 수 있어 타입 안정성을 더욱 강화할 수 있다.

유니온 타입은 타입스크립트를 더욱 강력하게 사용하는 핵심 개념 중 하나다. 앞으로 다양한 상황에서 유니온 타입을 활용해 더욱 안정적인 코드를 작성해보겠다! 🚀