TypeScript에서 유니온 타입(|)과 인터섹션 타입(&)을 헷갈렸던 사례

배경 코드

type Locale = "ko" | "en" | "ja";
type FlagsValue = { value: Locale; label: string };

const languages: (FlagsValue | { value: "original"; label: string })[] = [
  { value: "original", label: "Original" },
  { value: "ko", label: "한국어" },
  { value: "ja", label: "日本語" },
  { value: "en", label: "English" },
];

---

정리 1: | 와 & 를 헷갈렸던 부분

처음에 FlagsValue | { ... } 가 아니라
FlagsValue & { ... } 로 착각하고 사용하려고 했다.

하지만 &(인터섹션 타입)를 사용하면
두 타입을 모두 만족하는 하나의 객체가 되어야 한다.

즉 이런 식의 이상한 형태를 요구하게 된다.

{
  value: Locale;
  label: string;
  value: "original";
  label: "Original";
}

현실적으로는 말이 안 되는 타입이다.

그래서 이 경우에는 |(유니온 타입)를 사용해서
다음 중 하나가 올 수 있도록 정의하는 것이 맞다.

• { value: "ko"; label: "한국어" }

• { value: "ja"; label: "日本語" }

• { value: "en"; label: "English" }

• { value: "original"; label: string }

---

정리 2: 배열 앞에서 타입을 합치는 방법

배열에 유니온 타입을 적용할 때는
() 로 묶어서 배열 요소 타입을 명확히 지정할 수 있다.

const languages: (FlagsValue | { value: "original"; label: string })[] = [
  ...
];

이렇게 하면
“배열 안의 각 요소가 FlagsValue이거나 original 타입 중 하나”라는 의미가 된다.

---

한 줄 요약

• | 는 이것 혹은 저것 (or)

• & 는 이것과 저것을 합친거 (and)

• 배열에서 유니온 타입을 쓰려면 () 로 요소 타입을 묶어주자