[ Typescript ] - Narrowing 할 수 있는 방법 더 알아보기

null & undefined 체크하는 법

실제로 개발 할 때 어떤 변수나 함수파라미터에 null , undefined가 들어올 경우

if ( 저 변수가 undefined일 경우 ) 

if 문을 통해서 narrowing 해주면 된다 .

그런데..

&& 스킬을 쓰면 if문 생략 가능

&&

let data = axios.get("주소")

if ( data && Array.isArray(data) ) 

이런식으로 data 값이 null | undefined 일 경우 if 문에서 탈출

아니면 if문 안 조건문 실행 한다.

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

in 연산자로 object 자료를 narrowing

object에서 쓸 수 있는 for 문이 있는데 바로

for in 문이다 .

var obj = {
  a : 1,
  b : 'a',
  c : false,
  d : null
}

for (const key in obj) {
  console.log(key) // key 값인 a , b , c , d
}

for (const key in obj) {
  console.log(obj[key])// 1,'a',false ,null
}

for in 문을 통해서 object의 key 값을 뽑을 수가 있다. 물론 응용해서 value 값도 뽑을 수 있다.

이를 통해서 object에 in 연산자로

이 파라미터가 a 라는 key를 안에 가지고 있냐 이런 식으로 지정할 수 있다 .

타입스크립트 컴파일러는 똑똑한 편이라 이런 것들도 narrowing 으로 판정해 준다.

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

instanceof

class에서부터 태어난 자식들을 멋진 말로 instance라고 하는데

여기서 instance (=객체) 는 누가 부모인지 알 수 있는 방법이 있다 .

instanceof Keyword를 사용하면 검사가 가능한데... 이것도 narrowing 역할을 할 수 있다.

let date = new Date()
if ( date instanceof Date ) { console.log('hi') }

let arr = new Array();
if ( arr instanceof Array){console.log(`참이에요`) }

literal type

linteral type이 있으면 narrowing이 쉬워질수있다. 단 내가 잘하면...

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

function 함수(x : Car | Bike){
  // literal이 있으니 다행이군
  if (x.wheel==='4개'){
    console.log('이 차는 ' + x.color)
  } else {
    console.log('이 바이크는 ' + x.color)
  }
}

• typeof 연산자 써도 그냥 object

• in 문법으로 하기엔 key값이 둘다 똑같다.

• 그런데 literal type 이 다르니까 그걸로 구별해주면 좋겠다.

Object 자료 비슷한걸 많이 다룰 땐 literal type 으로 object 안에 각각 유니크한 자료를 달아두거나 해야겠다.