Narrowing 추가적인 방법들

---

null & undefined 체크하는 법

1 && null && 3   // null 반환
undefined && '안녕' && 100  // undefined 반환

&&연산자 사용

=> 기존 의미: 조건식 2개 비교 후 참/거짓 판별하는 논리연산자

=> 자료형 비교 시: &&사이에서 처음 등장하는 falsy값을 찾고 그게 아니면 마지막 값을 반환

falsy값 : false와 유사한 기능을 가진 null, undefined, NaN 등의 값을 뜻함

 

Narrowing을 할 경우 &&연산자를 잘 이용하면 if문을 간략하게 줄일 수 있음.

if (변수 && typeof strs === "string") {}

1. 변수가 falsy값을 가진다면 if문을 실행하지 않음.

2. 변수가 string값이라면 if문을 실행

if (변수 != null)

위 방식이 이해가 안 간다면, 이 조건식을 사용할 것.

=> null, undefined 두 개는 제외하고 조건식이 성립됨.

---

in 연산자

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

사용법 : if (키값 in object 자료형)

1. 배타적인 속성이어야 함.

{swim : string}, {fly : string}

=> 서로 다른 속성을 가짐으로써 Narrowing 가능.

---

instanceof 연산자

let 날짜 = new Date();
if (날짜 instanceof Date){
  console.log('true')
}

사용법 : if (변수명 instanceof 부모클래스)

1. 부모 class의 인스턴스만 사용 가능 => new 연산자로 생성된 object

=> 부모클래스를 검사하여 Narrowing 가능

---

literal type

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

typeof, in, instanceof 연산자를 모두 사용할 수 없는 경우

literal 타입을 설정하여 Narrowing을 하는 방법.

=> 단순히 literal 타입으로 선언된 속성을 찾는 방법.

---

타입스크립트 컴파일러는 똑똑해서 if문을 잘 작성한다면 그것대로 사용자만의 Narrowing 방식이 될 수 있다.

이번 강의를 통해 대표적인 Narrowing 방법을 알아보았는데 아무래도 if (변수!= null) 이 방식이 현명한 것 같다.

평소에 js를 다룰 때에도 많이 사용했던 방식이고 나쁘지 않은 방식이라고 하셨다.

그리고 리액트를 하면서 &&연산자를 사용하는 경우가 가~끔 있었는데 원리를 이해하니 응용을 할 수 있을 것 같다는

느낌이 들어 성장하는 나를 마주할 수 있었던 것 같아 뿌듯했다. ㅎ..ㅎ