TypeScript 시작하기 (13) - Narrowing 할 수 있는 방법 더 알아보기

지난 시간에는 rest parameter 와 destructuring 할 때의 타입지정을 알아보았습니다. 오늘은 Narrowing 할 수 있는 방법을 더 알아보도록 하겠습니다.

1. type Narrowing 은 typeof 로 주로 한다고 했는데, 이 typeof 만으로는 narrowing 할 수 없는 상황이 발생하기도 합니다. 아래처럼, typeof 연산자는 number, string, boolean, object 등의 자료만 판정이 가능합니다.

   type Fish = { swim: string };
   type Bird = { fly: string };
   
   function practice(animal: Fish | Bird) {
     if (typeof animal === Fish) { // error. 'Fish'은(는) 형식만 참조하지만, 여기서는 값으로 사용되고 있습니다.ts(2693)
       animal.swim;
     }
   }

2. 이때, in 이라는 키워드로 object narrowing 이 가능합니다. type이 서로 가진 속성명이 다를 경우(배타적인 속성만 가질 때), 오브젝트를 구분하고 싶을 때 in 을 사용할 수 있습니다. 문법은 속성명 in 오브젝트자료 와 같이 사용합니다.

   type Fish = { swim: string };
   type Bird = { fly: string };
   
   function practice(animal: Fish | Bird) {
     if ("swim" in animal) {
       animal.swim;
     }
   }

3. 유사하게 instanceof 연산자로 object narrowing 이 가능합니다. 클래스는 object 를 만드는 기계라고 생각하면 편하기 때문에, 문법은 오브젝트 instanceof 부모클래스 와 같이 사용됩니다. object 두 개가 비슷하면 부모클래스가 누구인지 물어봐서 narrowing 이 가능합니다.

   const day = new Date();
   if(day instanceof Date)

4. 다음 자료를 보면 오브젝트가 비슷하게 생겼는데, narrowing 을 어떻게 해야할 지 고민해봅시다. 애초에 비슷한 타입을 하나만 만드는 것이 좋을 수 있겠으나, 이런 경우에는 literal type 으로 강제로 만들어주면 narrowing 에 도움이 됩니다.

   type Car = {
     wheel: "4개";
     color: string;
   };
   
   type Bike = {
     wheel: "2게";
     color: string;
   };
   
   function practice(x: Car | Bike) {}

5. 즉, 아래처럼 비슷한 오브젝트 타입이 많다면, literal type 을 넣어봅시다. 논리적으로 타입을 특정 지을 수 있다면 narrowing 으로 인정해준다고 보면 됩니다.

   type Car = {
     wheel: "4개";
     color: string;
   };
   
   type Bike = {
     wheel: "2게";
     color: string;
   };
   
   function practice(x: Car | Bike) {
     if (x.wheel === "4개") {
       console.log("x는 Car 타입입니다.");
     }
   }

지금까지 Narrowing 할 수 있는 방법을 더 알아보았습니다. 다음 시간에는 함수에 사용하는 never 타입에 대해 알아보겠습니다.