사용하는 이유는 Union type을 사용하면 Narrowing(좁히다)문법을 사용해서 타입을 하나로 정해주거나 Assertion(선언) 문법으로 타입을 선언해주는 것이 필요하기 때문이다.
2. Narrowing 문법 예시
/* 1. type of 연산자를 사용해서 정하기 */
function NarrowingTest ( a : number | string ) {
if(typeof a === 'string') {
return a + '1';
} else {
return 'a는 number입니다.'
}
/* 2 in 연산자를 사용해서 정하기 */
type Cookie = {choco : string }
type Ice = {berry : string }
function NarrowingTest2 ( a : Cookie | Ice ) {
if( 'choco' in a) {
return a + '1';
} else {
return 'a는 number입니다.'
}
//union type이 서로 다른 속성을 가지고 있어야 in 키워드를 사용할 수 있다.
/* 3. instanceof 연산자를 사용해서 정하기 */
// => object 두 개가 비슷하면 부모 class가 누군지 물어봐서 narrowing 가능
let title = document.querySelector('#title');
if (title instanceof Element){
title.innerHTML = '방가방가';
}
//타입을 하나로 확정 지을 수 있는 코드라면 어떤 것도 narrowing 역할 할 수 있다.
기타 Narrowing 방법
/*
1. && 사용 :
논리연산자 여러개를 사용하면 비교할 때 자료형을 넣으면
&&사이에 처음 등장하는 falsy값을 찾아거나 그게 아니면 마지막 값을 남겨준다. (null, undefined, NaN...)
*/
function Check(a : string | undefined) {
// && 기호 사용 undefined까지 한번에 타입 체크
if( a && typeof a === 'string') {
console.log(a);
}
}
// 추가로 if (a != null) 이렇게 조건식을 써도 null, undefined 이거 두 개를 동시에 거를 수 있다.
// 2. in 연산자 사용하기 (obj가 서로 다른 속성(유니크)을 가진 것을 구분할 때 사용)
type bort Type인지 확인하는 문법) = {swin : string}
type airplane = {fly : string}
function Check_Type (Transit : bort | airplane) {
/* 이 상황에서 만약 if typeof를 쓰면 object로 인식해서 오류가 발생한다.*/
// if문을 사용해 narrowing (swin이 Transit에 들어 있는지, 있다면 bort Type인지 확인하는 문법)
if('swin' in Transit) {
Transit.swin;
}
}
3. Assertion 문법 ?
타입을 덮어씌우는 문법이다.
변수의 타입을 number로 생각해주세요 라고 하면 컴파일러가 넘어갈 수 있는 문법이다.
일반적으로 확실하게 정확한 값이 들어올 때 사용하며, Type 에러를 해결하는 용으로 사용한다.
4. Assertion문법 예시
//Assertion 문법 count는 number라고 주장하기에 컴파일러는 넘어가게 된다.
function AssertionTest (count : number|string) {
return count as number + 1;
}
/*
이전에는 요런 형식으로 작성했다.
let chicken :string = 'soy';
<number>chicken
*/
