Html변경과 조작 시 주의점

타입스크립트로 html조작이 가능한데, 좀 다르다고 한다.

먼저, html파일을 만들고,

<h4 id="title">안녕하세요</h4>
<a href="naver.com" class="link">링크</a>
<button id="button">버튼</button>

<script src="변환된 자바스크립트파일.js"></script>

위처럼 만든 후, 타입스크립트에서

let 제목 = document.querySelector('#title');
제목.innerHTML = '반갑소'

이렇게 쓰면, 에러가 난다. 제목이 element | null이라고 해서 에러가 나는데, document로 찾을 때 잘못찾으면 null이 나오고, 잘 찾으면 element가 나와서 union이 된 것이다. 그래서 narrowing을 해줘야 한다.

그래서

let 제목 = document.querySelector('#title');
if (제목 != null) {
	제목.innerHTML = '반갑소'
}

이렇게 null이 아니면 html을 조작하라고 바꿔주면 된다.

 

이제 끝인데 , 여러가지 narrowing하는 방법을 배워보자.

2. instance of 연산자 이용

let 제목 = document.querySelector('#title');
if (제목 instanceof Element) {
	제목.innerHTML = '반갑소'
}

이렇게 적으며, 이 방법을 가장 많이 사용하게 된다. 제목이 Element의 자식이냐 요소냐 이런 뜻이다.

 

3. as로 사기치기

let 제목 = document.querySelector('#title') as Element;
제목.innerHTML = '반갑소'

이렇게 Element타입이라고 사기치는데, 이 방법은 비상시에 쓰는게 낫다.

 

4. 오브젝트에 붙이는 ?. 사용

let 제목 = document.querySelector('#title') as Element;
if (제목?.innerHTML != undefined) {
	제목.innerHTML = '반갑소'
}

이러면 제목에 innerHTML이 있으면 출력해주고, 없으면 undefined 뱉어라가 된다. 이건 optional chaining이란 신 문법이다.

 

5. tsconfig.json에서

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "strictNullChecks" : true,
    }
}

이 strictNullChecks를 false로 바꿔주면 그냥 안할 수 있다.

 

추가로 만약 a태그를 바꾸려면 a태그의 href에 맞는 타입명에 맞게 입력해야한다.

let 링크 = document.querySelector('#link');
if (링크 instanceof HTMLAnchorElement) {
	링크.href = 'https://kakao.com'  //잘됨
}

이렇게 a태그는 HTMLAnchorElement이고

img태그는 HTMLImageElement이다. 자동완성이 되거나 그때그때 찾아보자.

 

마지막으로 이벤트리스너를 부착하려면

let 버튼 = document.getElementById('button');
버튼?.addEventListener('click', function(){
  	console.log('안녕')
})

이렇게 ? 를 붙여서 narrowing하거나 if문으로 narrowing해주면 된다.

버튼 instanceof HTMLButtonElement라고 쓰면 narrowing될 듯