답변.

문제의 역사:

유니온 타입은 TypeScript에서 서로 다른 유형의 값을 가질 수 있는 변수 및 매개변수를 설명하기 위해 나타났습니다. 이 가능성은 고전적인 언어에 비해 타입화의 유연성을 크게 확장했습니다.

문제:

JavaScript에서는 함수 및 변수가 종종 다형적이며 (예: 숫자나 문자열을 받을 수 있음) 이는 안전한 타입화를 복잡하게 만듭니다. 유니온 타입이 없을 경우, any를 사용하거나 코드를 중복해야 했습니다. 이는 프로덕션에서 오류 수를 증가시키고 큰 팀에서 작업을 어렵게 했습니다.

해결책:

유니온 타입은 여러 타입 중 하나일 수 있는 변수를 선언할 수 있게 해주며, 검사를 통해 올바른 작업을 보장합니다. 또한, 타입 축소(type narrowing) 지원이 구현되어 있어 컴파일러가 "무엇과 관련이 있는지" 이해하는 데 도움이 됩니다.

코드 예제:

function formatId(id: number | string): string {
  if (typeof id === 'string') {
    return id.toUpperCase();
  }
  return id.toString();
}

주요 특징:

변수 및 매개변수의 가능한 타입을 명시적으로 지정할 수 있습니다.
typeof나 in과 같은 검사 기능을 통해 타입 축소 메커니즘과 함께 작동합니다.
동일한 키가 다른 타입을 가질 수 있는 객체에서의 작업이 복잡해지며, 접근 논리를 신중하게 관리해야 합니다.

속임수 질문.

서로 다른 속성을 가진 객체의 유니온을 작성하고 검토 없이 모든 속성에 접근할 수 있나요?

아니요. 유니온 타입은 모든 타입에 존재하는 속성 및 메서드에만 접근할 수 있도록 합니다. 특정 속성에 접근하려면 타입 축소가 필요합니다.

코드 예제:

type Fish = { swim: () => void; };
type Bird = { fly: () => void; };

function move(animal: Fish | Bird) {
  // animal.swim(); // 축소 없이 오류 발생
  if ('swim' in animal) {
    animal.swim(); // 괜찮음
  }
}

문자열 | 숫자 유니온 타입에 대해 모든 메서드가 사용 가능한 이유는 무엇인가요?

TypeScript는 유니온에서 포함된 모든 타입에 있는 것만 허용합니다. 개별 메서드를 사용하려면 먼저 실제 타입을 확인해야 합니다.

유니온에서 타입을 검사하지 않고 특정 메서드를 호출하려고 하면 어떻게 되나요?

이런 경우, 메서드의 존재가 보장되지 않기 때문에 컴파일 오류가 발생합니다. 특정 타입을 확인한 후에만 작동합니다.

일반적인 오류 및 안티패턴

사용 전에 타입 검사를 생략 (접근 오류를 유발할 수 있음).
너무 광범위한 유니온 타입을 설명 (타입 안전성이 손실됨).
잘못된 축소는 눈에 보이지 않는 오류 및 not exhaustive checks를 초래함.

실생활 예시

부정적 사례

변수에 string | number 타입을 주고 검토 없이 toUpperCase()를 호출했습니다. 결과적으로 애플리케이션이 숫자 데이터에서 크래시났습니다.

장점:

빠르게 작성된 코드.

단점:

런타임에서 오류 발생.
TypeScript의 정적 타입화에 대한 신뢰 상실.

긍정적 사례

메서드를 작업하기 전에 타입을 확인합니다:

if (typeof value === 'string') {
  return value.toUpperCase();
} else {
  return value.toString();
}