TIIL76.non-null assertion과 optional chaining

null 타입 오류를 해결하고 정리해보자.

*strict옵션을 true로 설정할 경우, null 타입 오류가 발생한다.

null 타입 오류 해결방법

object is possibly 'null'. ts(2531)

null 타입 오류가 발생했을 경우, 피연산자가 Nullish(null or undefined)값이 아님을 명시해야 하는데 if조건문을 사용하거나, non-null assertion를 사용하여 해결할 수 있다.

1.if조건문

function handleEvents() {
 if(rank) {
	rank.addEventListener('click', handleClick);
 }
}

// or

function handleEvents() {
 if(!rank) {
   return;
 } 
 	rank.addEventListener('click', handleClick);
}

2.non-null assertion (!)

null이 아닌 확신이 있다면 non-null assertion를 통해 '값이 있음을' 단언할 수 있다.

function handleEvents() {
	rank!.addEventListener('click', handleClick);
}

3.optional chaining 연산자 (?)

Optional chaining은 nullish한 경우에 에러를 발생시키는 대신 undefiend를 반환한다.
error가 아닌 undefined를 반환하므로 에러 핸들링의 역할도 한다.

function handleEvents() {
if(rank === null || rank === undefined) {
	return;
 }
  	rank.addEventListener('click', handleClick);
}
// 위의 코드와 아래의 옵셔널 체이닝 연산자는 같다.
function handleEvents() {
	rank?.addEventListener('click', handleClick);
}