오늘 배운 TypeScript

실무에서 TypeScript를 사용하면서 가장 애를 먹었던 부분이 "null과 undefined를 어떻게 처리해줄 것인가?" 였다.

const users = number | undefined;

if(!users) {
	throw new Error('유저 데이터 undefined');
} else {
  return <div>{users} 명</div> 
}  

위의 코드처럼 타입가드를 하게된다면 문제점은 모든 falsy 값을 처리한다는 것이다.

falsy 값 👉 '', 0, NaN, null, undefined, false

만약 유저가 한 명도 없을 때 0명이라고 보여줘야 하는데 !users 로 처리한다면 0도 결국 falsy 값이므로 error를 던지게 된다.

따라서 이를 확실하게 잡기 위해서는

const users = number | undefined;

if (typeof users === 'undefined') {
	throw new Error('에러');
}

이렇게 명시적으로 undefined만 걸러주도록 타입가드를 작성하면 된다.