typescript로 html 다루기

strictNullCheck

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

tsconfig.json 파일 안에 strictNullChecks 옵션을 추가하면 null이 들어올 경우 체크해줌

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

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

여기서 안녕하세요를 다른 걸로 바꾸려면

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

첫 번째 방법은 narrowing, 두 번째 방법은 instanceof를 사용하는 narrowing, 마지막 방법은 ?.인데 제목?.innerHTML은 제목의 innerHTML이 있으면 그 값을, 없으면 undefined를 남기는 것

HTMLElement 타입

let 링크 = document.querySelector('#link');
if (링크 instanceof HTMLElement) {
  링크.href = 'https://kakao.com' //에러남 ㅅㄱ
}

a태그 안의 주소를 바꿀 때 이런 식으로 짜면 HTMLElement에는 href가 없다고 에러

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

HTMLAnchorElement라는 정확한 a태그를 가리키는 명칭을 사용해야 함

Element, HTMLElement, HTMLAnchorElement 등이 있는데 Element에 들어있는걸 복사하고 몇개 더 추가해서 HTMLElement 타입을 만들고 HTMLElement에 들어있는걸 복사하고 몇개 더 추가해서 HTMLAnchorElement 타입을 만들어둔 것.
셀렉터로 찾으면 Element 타입이 부여됨. 아직 이 태그가 뭔지 몰라서 그냥 광범위한 타입하나를 지정해주는 것. 이건 광범위한 그냥 일반 html 태그의 특징을 정리해둔 타입이기 때문에 안에 .href .src 등이 들어가있지 않음.
반면 HTMLAnchorElement 이건 조금 상세한 타입입. 이 타입은 "href, style, class, id 이런 속성을 가질 수 있다~" 라고 타입이 정의되어있음. 그래서 a태그에게 어울리는 타입인 HTMLAnchorElement 라는 타입을 쓸 수 있는지 instanceof 키워드로 확인!

확인하는 과정을 narrowing으로 인정해줌