narrowing이나 더 알아보기

narrowing을 할 때, typeof연산자를 사용하는데 외에 더 알아보자.

 

먼저 &&기호를 배워보자.

function printAll(strs: string | undefined) {
  if (strs && typeof strs === "string") {  
    console.log(s);
  } 
}

이런 식으로 &&를 쓰면  undefined와 null을 거를 수 있다.

또한 strs != null을 써도 동시에 거를 수 있다

&&연산자가 처음 등장하는 falsy값을 찾아주고, 그게아니면 마지막 값을 반환하기 때문에 위처럼 사용할 수 있는 것이다.

 

두번째로, in키워드를 알아보자.

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

typeof는 string,number같은 타입만 지정할 수 있으므로, 속성명 in 오브젝트자료로 써서

'swim'이 오브젝트자료에 있냐? 즉 Fish타입이냐 검사한다.

in키워드는 배타적인(다른 속성이 있을때만 사용가능)

 

세번째로, instanceof가 있다

오브젝트 instanceof 부모class로 사용하며,

오브젝트 두개가 비슷해서 부모에 물어볼 수 있다.

 

마지막으로, literal타입을 이용해보자.

type Car = {
  wheel : '4개',
  color : string
}
type Bike = {
  wheel : '2개',
  color : string
}

function 함수(x : Car | Bike){
  if (x.wheel === '4개'){
    console.log('이 차는 ' + x.color)
  } else {
    console.log('이 바이크는 ' + x.color)
  }
}

이런 경우에선 속성명이 wheel, color로 같으니 in 키워드도 사용할 수 없다.

그래서 이렇게 비슷한 오브젝트 타입일 경우 literal type을 강제로 만들어두면 도움이 된다.

위는 wheel =4개 2개로 리터럴타입을 만들었다. 그래서 narrowing을 wheel이 4갠지 2갠지 구분하면 된다.

 

즉, 논리적으로 이 타입을 특정지을 수 있으면, narrowing으로 구분해준다.