[TypeScript] Narrowing

JoGabi·2022년 2월 28일
0

TypeScript

목록 보기
2/8
post-thumbnail

narrowing 할때 typeof 안되는 경우 있다..
어떤 스킬들 사용하면 될 것인가!!

실제 타입스크립트를 사용하기 이전부터 undefined 체크를 해야하는 경우가 아주 많았다

1) && 키워드로 narrowing

&&의 다른 기능

내가 알고있는 의미는 조건식에서 두개가 true 인 경우 전부 true 로 판정 하라는 논리연산자 이다.
하지만 여러개를 사용하면 이상현상이 생긴다

&& 로 비교할 때 자료형을 넣으면 && 사이에서 처음 등장하는 falsy 값을 먼저 찾아주고 그게 아니면 마지막 값을 남겨 준다.
(falsy :: null, undefined, NaN )

예시

보통 첫번째 if 문 처럼 사용했지만
한 줄로 줄이고 싶으면 두번째 방법도 가능하다

a 가 undefined 면 조건식이 자동으로 undefined 가 자리에 남는다 (그러므로 실행안됨)
a 가 string 이면 true 이므로 if 문 안에 실행됨

function name( a: string | undefined ) {
 
  if ( a typeof === "string") { 
  }else { }
  
  if ( a && typeof a === "string" ) { 
  }
}

2) in 키워드로 object narrowing

서로 가진 속성명이 다르면 in 써볼 수 있다

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

function 함수( animal: Fish | Bird ) {

  if ("swim" in animal) {
    //  animal 타입인지 검사
  }
}

3) instanceof 연산자로 object narrowing

object instanceof 부모class
obejct 가 date 로부터 생성되었냐는 의미

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

4) in object 도 불가능하고 instanceof 도 불가능 할때

x 안에 object 키가 같아서 in 도 찾을 수 없음
애초에 똑같은 타입인데 두개를 만들어야 할 필요가 없음 하지만 ? 굳이 구분을 해야한다면

비슷한 object 타입이 많으면
literal type 넣어봐도 비슷하게생긴 object 타입 구분 가능
object 타입마다 literal type 만들면 좀 더 편리해짐

논리적으로 이 타입인지 특정지울 수 있으면 narrowing 인정^^

type People = {
  id: 4;//literal type
  num: "4개"; //literal type
  state: string;
};

type Like = {
  id: 5;//literal type
  num: "2개"; //literal type
  state: string;
};


function resultFunciton(x: People | Like) {
   if (x.num === "4개") {
    //이 변수는 People type 이라는 의미 
  }
}
profile
서울에서 프론트엔드 개발자로 일하고 있는 Gabi 입니다. 프론트엔드: Javascript, React, TypeScript 에 관심이 있습니다.

0개의 댓글

관련 채용 정보