유니온과 리터럴 (Union & Literal)

 

 

🏔️ 유니언  (Union)

유니언은 결합, 연합과 같은 뜻을 가지고 있으며 타입스크립트에서의 유니언은 둘 이상의 타입을 허용하는 것을 의미합니다. 

`|` 기호를 사용해서 여러 타입을 하나로 결합할 수 있습니다.

 

아래 예시와 같이 'number  | string' 타입을 가질 수 있는 변수를 정의하면, 이 변수는 숫자와 문자 모두를 할당할 수 있게 됩니다. 

let physicist : number | string;
physicist = "Marie Curie";
physicist = 86;

 

값이 유니언 타입일 때 타입스크립트는 유니언으로 선언한 타입에 존재하는 멤버의 속성에만 접근할 수 있습니다. 그 외의 타입에 접근하려고 하면 타입 검사 오류가 발생합니다. 

 

physicist는 number | string 타입으로 두 개의 타입에 모두 존재하는 toString()은 사용 가능하지만, toUpperCase()와 toFixed()는 각각 number/string 타입에 없기 때문에 사용할 수 없습니다.

 

🏔️ 내로잉 (Narrowing)

 

내로잉은 타입스크립트에서 변수의 타입을 좁혀나가는 것을 의미합니다. 주로 조건문이나 값 할당을 통한 내로잉이 있으며, 가장 흔하게는 typeof 연산자를 사용하는 예시가 있습니다. 

 

가장 자주 사용하는 typeof의 예시를 들어볼게요. 

아래 코드와 같이 if 문에서 typeof researcher가 'string'인지 확인해서 타입스크립트에 researcher 타입이 string임을 나타냅니다. 

let researcher = Math.random() > 0.5 
	? "Frida Kallio"
	: 60; 

if (typeof researcher === "string") {
	researcher.toUpperCase(); // Ok: string
}

 

 

🏔️ 리터럴 타입 (Literal Type) 

리터럴 타입은 좀 더 구체적인 버전의 원시 타입으로도 볼 수 있는데, 값 자체를 타입으로 사용하는 것을 의미합니다.

 

간단한 코드로 살펴보면, philosopher는 딱 보기에 string 타입이지만 단지 string 타입이 아닌 "Hypatia"라는 특별한 값입니다. 이것이 바로 리터럴 타입의 개념입니다. 

const philosopher = "Hypatia";

 

 

boolean, null, undefined 타입 외에 number, string과 같은 모든 원시 타입에는 무한한 리터럴 타입이 있습니다.

boolean은 true | false 의 리터럴 타입을 가질수 있겠고, number는 0 | 1 | 2... 등등 수많은 number 값을 리터럴 값으로 가질수 있겠죠. 

 

유니언 타입에서 리터럴과 원시 타입을 섞어서 사용할 수도 있습니다. 

아래 예시 코드와 같이 lifespan은 number 타입도 되고 'ongoing' 값으로도 나타낼 수 있습니다.

let lifespan: number | "ongoing" | "uncertain";

lifespan = 80; //Ok
lifespan = "ongoing" //Ok

 

 

🏔️ 타입 별칭 (Type Alias)

가끔 반복적이고, 입력이 긴 유니언 타입을 사용해야 할 때를 마주할 수도 있는데 이를 간단하게 사용하도록 돕는 것이 타입 별칭입니다. 

 

아래 두가지 코드를 비교했을 때, 어떤 코드가 더 간단해 보이시나요? (?) 

당연히 후자겠죠. 이렇게 긴 유니언 타입을 타입 별칭을 사용하면 훨씬 더 간결하게 코드를 작성할 수 있습니다. 

let rawDataFirst: boolean | number | string | null | undefined;
let rawDataSecond: boolean | number | string | null | undefined;
let rawDataThird: boolean | number | string | null | undefined;

type RawData = boolean | number | string | null | undefined;

let rawDataFirst: RawData;
let rawDataSecond: RawData;
let rawDataThird: RawData;

 

 

타입 별칭은 결합도 가능하기 때문에, 아래와 같은 코드도 작성이 가능합니다. 

type Id = number | string;

//IdMaybe의 타입은 number | string | undeffined | null 
type IdMaybe = Id | undefined | null;

 

 

 

 

 

 

 

출처: 러닝 타입스크립트