Typescript 에러 Object is possibly 'null'

타입 스크립트를 배우고나서 적용해보면서 나는 문제들을 하나씩 해결하고 기억하기 위해 블로그를 작성해보려한다.

 

1. querySelector()에러

document.querySelector(selecter).option 을 사용하는 경우가 많이있다. 그럴떄마다  Object is possibly 'null'.  는 경고가 뜨게 된다. 이 경고가 뜨는 이유는 개발자의 입장에서는 DOM이 당연이 있다고 생각하지만 ts는 있는지 없는지 확실하지가 않다.

그렇게 떄문에 개발자가 확실하게 알려줄 필요가 있다. 

 

if문으로 null 걸러냄

const DOM = document.querySelector(selecter)
if (!DOM) {
  return;
}
DOM.option;​

if문으로  null을 판별해주는 방법입니다.

코드양도 많고 여러가지 DOM을 조작할수록 코드가 많아지는 단점이있습니다.

 

옵셔널체이닝 사용

두번째 방법은 옵셔널체이닝 (?)을 사용하는 방법입니다.

document.querySelector(selecter)?.option

 

위에 코드처럼 querySelector()뒤에 ?를 붙이는 것으로 해결할수있다 

타입 단언 사용 (type assertion)

타입 단언을 사용하는 방법입니다.

!를 사용하거나 as 키워드를 사용합니다. (둘다 효과는 동일합니다.)

document.querySelector(selecter)!.option

 

결론

 

세가지 방법중 가장 좋은 방법은 옵셔널 체이닝이 가장 좋은 방법인것같다.

타입단언은 확실할떄만 사용해야하기 떄문에 실수가 있을수있다