[TypeScript] Narrowing 할 수 있는 방법

0. 들어가면서 

Narrowing을 할 때 typeof 연산자를 많이 사용한다. 

하지만 Narrowing을 해야 하는데, typeof 연산자 외에 다른 방법을 사용할 필요가 있을 경우도 있다. 

 

1. in 연산자로 object 자료 Narrowing

파라미터로 Object가 2개 들어올 수 있다고 타입을 지정했을 때 사용할 수 있다. 

예를 들어, 하나의 Object는 { a : 'Kim' }, 다른 하나의 Object는 { b : "Seo" } 이렇게 서로 다른 유니크한 속성을 가진다면

" if (이 파라미터가 a라는 속성을 안에 가지고 있냐) "  같은 Narrowing이 가능하다. 

 

if( 키값 in object 자료형 ) 방식으로 쓰면 된다. 

type Fish = { swim : string };
type Bird = { fly : string };

function func(animal: Fish | Bird) {
    if ("swim" in aniaml) {
    	return animal.swim
    }
    
    return animal.fly
}

서로 속성이 다른 경우에 Narrowing이 가능한 방식이다. 

Fish와 Bird가 같은 swim 속성을 가지고 있다면 혹은 같은 fly 속성을 가지고 있다면 사용하기 곤란한 방법이다. 

 

2. class로 생성된 Object에 instanceof로 Narrowing

class 문법을 통해서 new 키워드로 생성된 Object들은 instanceof 키워드를 붙여서 부모 클래스를 검사할 수 있다. 

이것도 Narrowing의 역할을 할 수 있다. 

let date = new Date();
if(date instanceof Date) {
    console.log("true");
}

 

 

3. literal type을 사용한 Narrowing

type Car = {
    wheel: "4개",
    color: string,
}

type Bike = {
    wheel: "2개",
    color: string,
}

function func(x : Car | Bike) {
    if(x.wheel === "4개") {
    	// ...
    }else {
    	// ...
    }
}

Car와 Bike 모두 typeof 연산자를 사용하면 object로 나오며, in 문법을 사용하기엔 서로 다른 속성이 없어서 

불가능하다. 

 

이때 literal type인 wheel로 Narrowing이 가능하다. 

Bike는 wheel을 출력하면 " 2개 ", Car는 " 4개 "로 구분이 가능하다.