[TypeScript] 타입스크립트로 HTML 변경 또는 조작 시 유의점

Type Narrowing시 <a>태그의 href 속성의 경우 정확한 타입명을 기재해줘야 한다.

index.html

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

<script src="index.js"></script>

index.ts

에러 발생 코드

let 링크 = document.querySelector('.link');
let (링크 instanceof Element) {
 링크.href = 'https://kakao.com'
} //href 속성은 Element 타입에 존재하지 않는다는 에러 발생

옳은 코드

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

cf. HTML 태그 별 타입명
a 태그 : HTMLAnchorElement
h1 태그 : HTMLHeadingElement
button 태그 : HTMLButtonElement