typescript ts로 HTML을 만져보자

js의 원래 목적은 html조작하는건데,
ts로도 이게 가능하다.
근데 js랑 다르게 좀 귀찮게 해야하는데
document.getElementById()로 예를 들어보면

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

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

HTML 찾고 변경하려면

ts
let title = document.querySelector('#title');
title.innerHTML = 'title' // title이 null일 수도 있다고 err

저기서 err가 나오는데,
이건, strict옵션이 true라서다
querySelector()로 가져오면 타입은 Element | null이다.
그래서 null일 수도 있어서 에러임

이거 확실하게 ㅇㅇ

let title = document.querySelector('#title');
title.innerHTML = 'title' // title이 null일 수도 있다고 err

if (title instanceof HTMLElement){
  title.innerHTML = 'hi'
}

let title2 = document.querySelector('#title') as HTMLElement
title2.innerText = 'hi'

이런식으로 instaceof로 narrowing이나 assertion으로 타입 확실하게 하자
아무래도 as는 좀..;;
엥간하면 instaceof하자

optional chaining

let title = document.querySelector('#title');
if (title?.innerHTML != undefined) {
  title.innerHTML = 'hi'
}

?연산자는 object자료안에 .innerHTML이 존재하면 쓰고,
아니면 undefined넘겨라는 뜻임
? 쓸 때도 있음

strict설정 false

tsconfig에서 null 체크기능인 "strictNullChecks": true이 켜져있으면 오류를 내주는데
이거 끄면 오류 안해줌

여러 방법중에 엥간하면 instanceof를 쓰는게 좋음

let link = document.querySelector('#link');
if (link instanceof HTMLElement) {
  link.href = 'https://kakao.com' //err
}

HTMLElement type에는 href 속성이 없어서 err

html태그는 종류별로 다 타입이 다름
a태그는 HTMLAnchorElement
...
뭐 다 다름

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

그래서 이렇게 해야한다.

ts에서 html타입은
Element, HTMLElement, HTMLAnchorElement 등이 있는데,
selector로 가져올때는 Element를 타입으로 지정된다.
근데 태그마다 다 속성이 있는게 다르기 때문에
ts에서는 instanceof로 확실한 태그에 맞는 타입인지 확인해야 err가 나지 않는다.

---

EventListener

버튼같은거 누르면 뭐 실행해야할때 쓰는 EventListener도 마찬가지로
narrowing해서 타입을 확실시해야한다.

20년이후인 요즘에는 ?를 많이 씀
objec에서 자료 가져올 때도 object.blahblah이런식으로 가져오는데
?이거 쓰면 존재하면 그거 가져오고 아니면 unedefined 넣어둔다.
narrowing에 &&같은거로 undefined체크하기 귀찮으면 이거 씀

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

버튼이 없으면 undefined로 보내주고
HTMLElement로 있으면 addEventListener로 넣기 때문에
narrowing이라고 해도 됨