[TS] 유니언 타입이란?

TypeScript의 유니언 타입은 변수가 여러 타입 중 하나일 수 있음을 선언하는 방법입니다. 유니언 타입은 수직 바(|)를 사용하여 표시되며, 이는 변수가 "이 타입 또는 그 타입"임을 나타냅니다.

다음은 유니언 타입의 예

let unionType: string | number | boolean;

unionType = "Hello";  // 가능합니다. string은 유니언 타입의 일부입니다.
unionType = 7;  // 가능합니다. number은 유니언 타입의 일부입니다.
unionType = true;  // 가능합니다. boolean은 유니언 타입의 일부입니다.
unionType = {};  // 에러! 객체는 유니언 타입에 선언되지 않았습니다.

유니언 타입은 다양한 유형의 값을 다루는 데 유용합니다. 예를 들어, 함수가 여러 유형의 입력을 받을 수 있거나, 객체의 속성이 여러 유형을 가질 수 있을 때 유니언 타입을 사용할 수 있습니다. 또한 함수의 반환값이 여러 유형 중 하나일 수 있을 때 유니언 타입을 사용할 수 있습니다.

유니언 타입을 사용하면, TypeScript 컴파일러는 해당 변수를 모든 가능한 타입으로 취급합니다. 이는 일부 상황에서는 추가적인 타입 검사를 필요로 하게 만들 수 있습니다. 예를 들어, string | number 유니언 타입의 변수를 가지고 있고 그 변수가 문자열일 때만 특정 작업을 수행하려는 경우, 타입 가드를 사용하여 변수의 현재 타입을 체크해야 할 수 있습니다.

if (typeof unionType === 'string') {
  console.log(unionType.toUpperCase()); // unionType이 문자열일 경우에만 toUpperCase() 메서드 호출 가능
}

TypeScript에서 유니언 타입 외에도 다양한 타입 선언 방법이 있습니다. 유니언 타입과 유사한 기능을 하는 것은 any와 unknown, 그리고 intersection 타입이 있습니다.

• any: any 타입은 변수가 어떤 타입이든 될 수 있음을 나타냅니다. 즉, TypeScript는 any 타입의 변수에 대한 타입 검사를 수행하지 않습니다. 이는 유연성을 제공하지만, 타입 안전성을 잃을 수 있어 주의가 필요합니다.

let variable: any;

variable = "Hello";  // 가능
variable = 7;  // 가능
variable = {};  // 가능

• unknown: unknown 타입은 any와 비슷하지만, unknown 타입의 변수는 직접적으로 사용하려면 타입을 좁혀야 하는 (즉, 타입을 확인해야 하는) 점에서 any와 다릅니다. 이렇게 하면 타입 안전성을 유지할 수 있습니다.

let variable: unknown;

variable = "Hello";  // 가능
variable = 7;  // 가능
variable = {};  // 가능

let str: string = variable;  // 에러! unknown 타입을 string에 할당하려면 타입 확인이 필요합니다.

• Intersection: intersection 타입은 여러 타입을 하나로 결합할 수 있게 해주는 기능입니다. & 연산자를 사용하여 표현하며, 이는 변수가 "이 타입 그리고 그 타입"임을 나타냅니다.

type FirstType = {
  a: number;
  b: string;
};

type SecondType = {
  c: boolean;
};

type CombinedType = FirstType & SecondType;

let variable: CombinedType;

variable = { a: 5, b: "Hello", c: true };  // 가능
variable = { a: 5, b: "Hello" };  // 에러! c 속성이 누락되었습니다.