Union 타입

| 연산자를 사용해서 타입을 여러개 쓸 수 있도록 하는 타입이다.
union 타입을 가진 변수의 타입은 명시된 타입 중 하나가 된다.

function printId(id: number | string) {
  console.log("Your ID is: " + id);
}

위의 공식문서 예제에서 parameter인 id의 타입은 number 또는 string이 될 수 있다.

printId(25); // 25
printId('25'); // '25'
printId({myID: 133}); // ❌ 에러 -> number 또는 string이 아니기 때문에 에러가 발생한다.

union 타입을 사용할 때 주의할 점?

❗️ method를 사용할 때, union 타입에 명시한 모든 타입을 만족시키는 method만 사용이 가능하다.

예를 들어, 아래와 같이 id의 타입으로 number 또는 string이 올 수 있는 경우에, string 타입에서만 사용 가능한 toUpperCase() 메서드를 사용한다면, number 타입에서는 사용이 불가하므로 타입스크립트는 에러를 발생시킨다.

function printId(id: number | string) {
	console.log(id.toUpperCase()); // ❌ 에러
}

이럴 경우에는 조건문을 사용해서 문제를 해결할 수 있다.

function printId(id: number | string) {
	if (typeof id === 'string') { // id가 string 일경우
    	console.log(id.toUpperCase());
    } else { // id가 number 일 경우
    	console.log(id);
    }
}

Literal 타입

정확한 값을 명시하는 타입이다.
명시한 값 외의 값들이 할당 될 경우에 타입스크립트는 에러를 발생시킨다.

공식문서

JavaScript에서는 var, let 키워드로 선언한 변수는 바뀌어도 에러가 발생하지 않는다.

아래의 사진 처럼, TypeScript에서도 마찬가지로 let으로 선언한 변수위에 마우스를 hover하면 TypeScript는 타입을 알려준다.

하지만 const로 선언한 변수위를 hover 하면 타입을 알려주는 것이 아니라 정확한 값을 알려준다.

즉, const로 선언한 변수는 리터럴 타입을 갖게 된다.

Union 타입과 Literal 타입을 같이 쓸 때

아래의 예제에서 resultConversion의 값으로는 'as-number' 또는 'as-text' 만 올 수 있다.
그 외의 값이 올 경우엔 타입스크립트는 에러를 발생시킨다.

function combine(
	input1: number | string,
	input2: number | string,
	resultConversion: 'as-number' | 'as-text'
) {
 // ... 생략
}