오늘의 TypeScript

 📚 타입스크립트로 HTML 변경과 조작할 때 주의점

👉 h4 안의 글자를 바꿔보자 

<h4 id="title">안녕하세요</h4>

👉 selector로 html을 찾으면 타입이 Element | null이기 때문에 html을 찾지 못하면 null이 되기 때문에 이 부분을 해결해줘야한다.

 

1️⃣ 해결책 (Type Narrowing)

let 제목 = document.querySelector("#title");
if (제목 !== null) {
  제목.innerHTML = "반가워요"
}

 

2️⃣ 해결책 (instanceof)

if (제목 instanceof Element) {
  제목.innerHTML = "반가워요"
}

 

3️⃣ 해결책 (as)

// 이 요소는 element라고 사기쳐주세요
// null이 들어와도 element type가능
// 비상시에 100%확신이 있을때
let 제목1 = document.querySelector("#title") as Element;
제목.innerHTML = "반가워요"

 

4️⃣ 해결책 (optional chaining)

// 제목에 innerHTML이 있으면 출력해주고
// 없으면 undefined 뱉어내 (optional chaing)
let 제목 = document.querySelector("#title");
if (제목?.innerHTML !== undefined) {
  제목.innerHTML = "반가워요"
}

 

👉 a 태그의 href 속성을 바꾸고 싶으면 어떻게 해야할까?

<a href="naver.com">링크</a>

👉 href, style, css를 바꾸려면 Element로 하는 것이 아니라 HTMLAnchorElement을 통해서 바꿔야 한다.

let 링크 = document.querySelector('#link');
if (링크 instanceof HTMLAnchorElement) {
  링크.href = "https://www.naver.com/"
}

 

👉 3개의 링크를 모두 바꾸려면 어떻게 해야할까?

<a class="naver" href="naver.com">링크</a>
<a class="naver" href="naver.com">링크</a>
<a class="naver" href="naver.com">링크</a>

👉 querySelectAll()을 통해서 naver라는 클래스를 가진 애들을 다 불러오고 forEach()문을 활용한다.

링크스.forEach((link) => {
  if (link instanceof HTMLAnchorElement) {
    link.href = "https://kakao.com"
  }
})