[TypeScript] Object is possibly 'null'

현재 수강 중인 자바스크립트 강의에서 나온 '나만의 크롬 시작화면 만들기' 프로젝트에

타입 스크립트를 무작정 도입을 시도했다가 자잘한 부분부터 문제가 생기기 시작했다.

이번에 정리한 것은 프로젝트를 빌드한 2023.09.20 일자에 발생했던 문제를 해결하는 과정에 대한 것이다.

 

const dateElement = document.getElementById("Today_Date");

const setNowDate = (month: number|string, date: number|string, day: string) => {
    dateElement.textContent = `${month}월 ${date}일 ${day}`;
    //문제가 발생한 부분
};

 

이런 식으로 'dateElement'라는 객체가 null일지도 모른다는 식의 경고가 발생한 것이었다.

문제를 해결하기 위해서 구글링을 시도했고, 다른 개발자 분들이 블로그에 올려둔 여러 글들을 읽어봤지만

정리한 내용을 이해하기가 버거워서 문제 해결을 잠시 미뤄두고 "내일 해결할까" 했다가

그래도 문제가 발생한 당일에 해결하는 것이 좋을 것 같아서 머리를 잠깐 식힌 다음에

 

다시 방금까지 읽던 블로그의 글을 읽어보다가 괜찮은 방법을 발견하였다.

바로 프로젝트에 해결법으로 나온 방법을 적용해 보니

더 이상 dateElement 객체가 null일지도 모른다는 경고가 나오지 않게 됐다.

 

일단 참고했던 블로그 링크를 바로 아래 줄에 첨부해 두겠다.

https://kyounghwan01.github.io/blog/TS/object-null/

Object is possibly 'null'

---

const dateElement = document.getElementById("Today_Date");

const setNowDate = (month: number|string, date: number|string, day: string) => {
    if(!dateElement) return;
    //위의 코드를 추가하니
    //더이상 dateElement 객체가 null일지도 모른다는 경고가 나오지 않게됐다.
    
    dateElement.textContent = `${month}월 ${date}일 ${day}`;
    //문제가 발생한 부분
};

위의 소스코드에서 dateElement 객체가 비어있을 수도 있는데

textContent라는 Key 값을 가진 Property에 값을 추가하려고 했기에 아래와 같은 경고가 발생하게 된다.

이는 Type Check를 엄격하게 하는 TypeScript이기 때문에 볼 수 있는 것으로

JavaScript로 코드를 짤 때는 이런 문제는 발생하지 않았다.

---

문제가 발생했던 setNowDate 함수 최상단에 아래와 같은 코드를 추가해 보자.

if(!dateElement) return;

 

if 문의 조건식 '!dateElement'가 true가 될 때, setNowDate 함수를 종료하게 된다.

그리고 if 문의! dateElement라는 조건식이 true가 되려면 dateElement가 null 이어야 한다.

즉, if 문을 통해서 null을 걸러내기 때문에 위와 같은 경고가 더 이상 발생하지 않게 된다.

---

JavaScript의 기본적인 문법만 공부하고, TypeScript로 바로 넘어가니 사소한 부분에서 막히는 일이 잦아졌다.

TypeScript라는 언어에 대한 지식을 습득하지 않고, 바로 프로젝트에 적용을 하려고 했으니

당연히 발생하게 될 일이고, 앞으로도 프로젝트를 진행할 때도 사소한 부분에서 막히는 일이 많을 것이다.

물론 이게 나쁘다고 생각하지는 않는다.

 

개발을 하다가 막히는 부분이 있으면 구글링을 해서 해결법을 찾아보면 되는 것이고

그 과정에서 배우는 것도 많이 있기 때문이다.

그리고 이러한 일들이 쌓이고 쌓이다 보면 내가 원하는 미래로 도달할 수 있을 것이다...

물론 문법 공부도 소홀히하면 안 되지만 말이다...

 

앞으로도 프로젝트를 진행하다가 막히는 부분이 있으면, 해결법을 찾아보고

내가 적용한 해결법을 대략적으로 정리해서 블로그에 남겨보자.

 

내 블로그에 하나씩 기록을 남겨두면 나중에 비슷한 문제가 발생해도

문제를 해결하는 것이 좀 더 수월할 수도 있으니깐 말이다