타입스크립트에서

let 제목 = document.querySelector('#title');

// 에러 발생
제목.innerHTML = '반가워요';

제목의 타입이 Union type 이다. Elment | null

왜 null 일수 있지? 가끔 html 요소를 잘못 찾게되면 null을 가질 수 있기 때문에…

let 제목 = document.querySelector('#title');

// 1. narrowing
if(제목 != null){
	제목.innerHTML = '반가워요';
}

// 2. narrowing
if(제목 instanceof Element){
	제목.innerHTML = '반가워요';
}

// 3. narrowing (as로 사기치기)
let 제목 = document.querySelector('#title') as Element;

// 4. narrowing (optional chaining)
제목?.innerHTML = "반가워요";

// 5. tsconfig가서 strict 삭제

let 링크 = document.querySelector('.link');
// DOM 타입도 Narrowing을 해줘야한다.
if(링크 instanceof HTMLAnchorElement){
	링크.href = '<https://kakao.com>';
}

a 태그의 경우 HTMLAnchorElement라고 정확히 narrowing을 해야한다.

타입스크립트에서 제공하는 DOM 타입들을 정확히 표현.

이벤트 리스너

let 버튼 = document.querySelector('#button');
// narrowing
버튼?.addEventListener('click', function(){
	
})