✨ 유니온 타입 (Union Type)
우리는 타입스크립트를 사용할 때 변수 등에 타입을 지정한다. 지금까지는 기본적으로 하나의 타입만 지정해서 사용했지만, 만약 여러 타입이 와야하는 경우라면 어떨까? 예를 들어 우리가 숫자를 입력 받을 때 문자열로 받아올 때가 있다.
이럴 때 우리는 여러 타입 중 하나가 되는 값을 나타내기 위해 유니온 타입을 사용하게 된다. 사용 방법은 아주 간단하다. 기존 리터럴 타입에서 사용했던 것처럼 or 연산자 |로 지정할 타입을 입력하면 된다. 아래 예시를 한 번 보자.
let numStr: number | string;
numStr = 10;
numStr = '10';
numStr = true; // Errornumber 변수에는 number 타입과 string 타입이 모두 올 수 있다. 대신 두 타입이 아닌 다른 타입이 오게 된다면 에러가 발생할 것이다.
실제 vscode 상에서도 위처럼 위 타입에 할당될 수 없다는 에러를 나타내고 있다. 하지만 여기서 문제점... 만약 number과 string 타입을 모두 받을 수 있는 num1과 num2 변수가 각각 존재할 때, 이 두 변수를 더하면 과연 어떻게 될까?
타입을 지정하지 않는 자바스크립트라면 알아서 덧셈을 진행한다. (결과는 원하는대로 나오지 않을 수 있음) 그렇다면 타입이 지정된 상태라면? 그것도 두 타입을 모두 받아올 수 있는 유니온 타입이라면?
결론은 에러가 발생한다.
✨ 타입 가드 (Type Guard)
이럴 때 사용하는 것이 바로 타입 가드이다. 가드라는 단어는 모두가 알겠지만 무언가를 지키고, 방어하는 느낌의 단어이다. 눈치가 빠른 사람이라면 이미 눈치를 채셨을 수도 있다. 맞다. 유니온 타입의 값을 처리할 때 어떤 타입인지 검사를 하고 해당 조건에 맞는 경우에만 그 타입을 선택하는 것이다.
이렇게 글로 적으니 뭔 말인지 도통 이해가 안 갈 수도 있다. 하지만 예시를 보면 쉽게 이해가 될 것이다.
function addNum(num1: number | string, num2: number | string): number | string {
return a + b;
}심플한 코드다. 두 변수가 함수의 매개변수로 존재하는데 number 또는 string을 타입으로 받아올 수 있다. 그리고 받아온 두 매개변수를 합치는 코드이다.
위에서도 설명했듯, 이 코드는 에러가 발생한다. 내가 숫자형을 입력할지, 문자열을 입력할지 알 수 없기 때문이다.
실제로 코드를 작성해도 이렇게 에러가 나타나는 걸 볼 수 있다.
자, 이제 if와 typeof를 사용하여 타입 가드를 한 번 적용해보자.
function addNum(num1: number | string, num2: number | string): number | string {
if (typeof num1 === 'number' && typeof num2 === 'number') {
return num1 + num2;
} else {
return `${num1} ${num2}`;
}
}조건문을 활용하여 변수들이 각각 숫자형으로 들어왔을 때에는 더하기 연산을 사용해주고 문자열이 들어왔을 경우에는 단순히 두 값을 이어 붙여서 나타내도록 하였다.
사진을 보면 알 수 있듯 에러가 발생하지 않는다. 과연 실행을 했을 때 우리가 예상한 값이 나타날까?
각각 숫자로 입력한 경우는 정상적으로 두 숫자가 더해진 값이 반환되었고 문자열 + 문자열, 문자열 + 숫자 같은 경우는 단순히 값을 이어 붙여진 채 반환되는 것을 확인할 수 있다.
