[TypeScript] Union

Union

TypeScript의 Union(유니온) 타입은 둘 이상의 타입을 허용하도록 하는 타입으로, 여러 종류의 값을 가질 수 있는 변수를 선언할 때 유용합니다. 유니온 타입은 '|' 기호를 사용하여 표시할 수 있습니다.

 

예를 들어, 다음과 같이 유니온 타입을 사용할 수 있습니다.

let val: number | string; // number 또는 string을 가질 수 있는 변수 선언

val = 123; // 숫자 할당
console.log(val); // 123

val = "hello"; // 문자열 할당
console.log(val); // hello

위 예시에서 'val' 변수는 number 또는 string 타입을 가질 수 있습니다. 

이를 통해 여러 가지 타입의 값을 단일 변수에 할당하여 유연성을 확보할 수 있습니다.

 

만약 다른 타입의 값을 넣으면 에러를 확인할 수 있습니다.

예를 들어 string 또는 boolean 타입을 가질 수 있는 타입을 선언해 보겠습니다.

이때 undefined을 넣어주면 에러가 발생합니다.

Type 'undefined' is not assingnable to type 'StringOrBooleanType'

메시지 그대로 undefined 타입이 StringOrBooleanType이라는 사용자 지정 타입에 할당될 수 없다는 것을 의미합니다.

 

그리고 들어갈 수 있는 글자들을 지정할 수도 있습니다.

type StateTypes = 'DONE' | 'LOADING' | 'ERROR';

let state: StateTypes = 'DONE';
state = 'LOADING';

만약 다른 글자가 들어가게 된다면 아래와 같이 에러를 확인할 수 있습니다.

메시지 그대로 'INITIAL'이라는 스트링 값은 StateTypes에 존재하지 않는다 라는 에러가 나는 것을 확인할 수 있습니다.

이렇게 여러 개의 값들을 입력할 수 있고 이외의 값들은 입력할 수 없도록 만들 수 있습니다.

 

List Union

리스트 유니온은 배열과 같은 리스트 구조에 다양한 유형의 값을 포함할 수 있도록 합니다.

 

예를 들어 string 리스트 또는 boolean 리스트 타입을 정의해 보겠습니다.

type StringListOrBooleanList = string[] | boolean[];

let strListOrBooleanList: StringListOrBooleanList = [
    '잘자세연',
    '안녕하세연',
    '누구세연',
]

strListOrBooleanList = [
    true,
    false,
    false,
    true,
]

 

이처럼 string 값을 여러 개 넣어줄 수 있고, boolean값도 여러 개 넣어줄 수 있습니다.

하지만 여기에서 string과 boolean이 함께 있는 리스트는 정의할 수 없습니다.

Type '(string | true)[]' is not assignable to type 'StringListOrBooleanList'

이러한 에러가 나타납니다. 
만약 두 개의 타입이 동시에 존재하는 리스트를 구현하고자 한다면 다음과 같이 정의해야 합니다.

type StrOrNumberList = (string | number)[];

let stringOrNumberList = [
    1, 2, 3,
    '잘자세연',
    '누구세연',
];

stringOrNumberList = [
    1,2,3
]

stringOrNumberList = [
    '잘자세연', '누구세연',
]

 

Interface로 사용하는 Union

인터페이스를 사용하여 유니온을 정의할 수도 있습니다. 이를 통해 인터페이스로 다양한 유형을 처리하는 객체를 생성할 수 있습니다.

 

예를 들어, 다음과 같이 유니온을 사용하는 인터페이스를 정의할 수 있습니다.

Animal 인터페이스를 정의하고 Human 인터페이를 정의합니다.

그 후에 AnimalOrHuman 타입을 선언해 줍니다.

interface Animal{
    name: string;
    age: number;
}

interface Human {
    name: string;
    age: number;
    address: string;
}

type AnimalOrHuman = Animal | Human;

Human 타입을 가정하고 입력해 보겠습니다.

let animalOrHuman: AnimalOrHuman = {
    name: '누구세연',
    age: 25,
    address: '대한민국',
}

console.log(animalOrHuman);
console.log(animalOrHuman.name);
console.log(animalOrHuman.age);
console.log(animalOrHuman.address);

저장하고 실행하면 입력한 값이 잘 출력되는 것을 확인할 수 있습니다.

근데 이 animalOrHuman에 마우스를 올려보면 AnimalOrHuman 타입이 아니고 Human 타입으로 인식되는 것을 확인할 수 있습니다.

TypeScript가 추론을 해서 정의가 된 것입니다.

Animal 타입을 가정하고 정의해 보겠습니다.

animalOrHuman = {
    name: '오리',
    age: 9,
}

console.log(animalOrHuman);

console.log(animalOrHuman.name);
console.log(animalOrHuman.age);

Human 타입과 동일하게 잘 출력되는 것을 확인할 수 있습니다.

이 animalOrHuman도 Animal 타입으로 인식되는 것을 확인할 수 있습니다.

둘의 차이는 address라는 주소가 있는지 없는지의 차이입니다.

이거를 TypeScript는 제대로 인지를 하고 유추를 정확하게 합니다.

 

 

유니온은 TypeScript의 강력한 기능 중 하나로, 다양한 유형의 값을 다룰 때 유용하게 사용할 수 있습니다.