타입스크립트에서 DOM 사용하기

null 체크

우선 null을 체크하기 위해 tsconfig.ts에 아래 옵션을 추가해준다.

"strict": true

 

DOM조작할때 querySelector로 조회하면 엘리먼트가 없을때 null이 발생하는데, 그 상황을 잡기 위해서이다.

 

html에 다음과 같은 p태그가 있다고 가정하자.

<p id = 'title'>안녕하쇼</p>

ts파일에서는 다음과 같이 narrowing하여 적을 수 있다.

그 이유는 title이 null과 Element의 union type이기 때문

let title = document.querySelector("#title");

if (title instanceof Element) {
  title.textContent = "반가워요";
}

let title = document.querySelector('#title') as Element

title.textContent="반가워요"

assertion문법은 버그를 추적하지 못하기때문에 100% 확실할때만 사용.

let title = document.querySelector("#title");

if (title?.textContent) title.textContent = "반가워요";

 

EventListener

 

다음과 같은 html태그가 있다면

    <button id="button">버튼</button>

다음과 같이 작성할 수 있다.

let btn = document.querySelector("#button");

btn?.addEventListener('click', function(){})
//btn에 addEventListner가 가능하면 진행, 아니면 undefined 리턴