TypeScript 시작하기 (9) - 타입스크립트로 HTML 변경과 조작할 때 주의점

---

저번 시간에는 함수와 methods 에 type alias 를 지정하는 방법을 알아보았습니다. 오늘은 타입스크립트로 HTML 변경과 조작할 때 주의점에 대해 알아보겠습니다.

---

1. index.html 파일을 우선 아래와 같이 만들어봅시다.

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

---

2. 다음으로, tsconfig.json 에 가서 strictNullChecks 옵션을 설정해줍시다.

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

---

3. index.html 의 <h4> 태그 안에 있는 글자를 바꿔봅시다. 아래 코드에서는 에러가 발생하는데, title 은 Element 혹은 Null 타입을 가진다고 경고해주고 있습니다. id 가 정확하지 않은 경우 null 이 반환되고, 정확하면 html 의 object 자로가 남기 때문입니다.

   let title = document.querySelector("#title");
   title.innerHTML = "반가워요"; // 에러 발생

---

4. 그래서 HTML 조작시 narrowing 을 사용해야 하는데, 첫번째 방법으로는 비교 연산자를 사용하여 조작하는 것입니다.

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

---

5. 두번째 방법으로는 instanceof 연산자를 사용하는 것입니다. 오른쪽에는 클래스명을 기입하고, 왼쪽에는 object 명을 기입합니다.

   let title = document.querySelector("#title");
   
   if (title instanceof Element) {
     title.innerHTML = "반가워요";
   }

---

6. 세번째 방법으로는 type assertion 을 이용하는 것입니다.

   let title = document.querySelector("#title") as Element;
   title.innerHTML = "반가워요";

---

7. 네번째 방법으로는 object 에 붙이는 optional chaining 입니다. title 이 없으면 innerHTML 한 결과가 undefined 로 반환됩니다.

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

---

8. 마지막 방법으로는 tsconfig.json 에서 설정해주었던 strictNullChecks 를 false 로 바꿔주는 것입니다.

---

9. 이번에는 <a> 태그의 href 속성을 바꿔봅시다. typescript 가 제공하는 기본 타입이 여럿 있는데, 그 중에서 Element 를 비롯한 이를 상속 받는 HTMLAnchorElement, HTMLHeadingElement, HTMLButtonElement 타입 등이 있다는 것을 이해해두어야 합니다. <a> 태그의 경우에는 HTMLAnchorElement 타입에 해당합니다.

   <!-- index.html -->
   
   <h4 id="title">안녕하세요</h4>
   <a href="naver.com" class="link">링크</a>
   <button id="button">버튼</button>
   
   <script src="index.js"></script>

   // index.ts
   
   let link = document.querySelector(".link");
   
   if (link instanceof HTMLAnchorElement) {
     link.href = "kakao.com";
   }

---

10. eventListener 를 부착할 수도 있는데, 아래 코드에선 optional chaining 을 이용하였기 때문에 오류가 발생하지 않고, button 이 없으면 undefined 로 대체가 됩니다.

    let button = document.querySelector("#button");
    button?.addEventListener("click", () => {});

---

11. 버튼을 누르면 이미지를 바꿔주는 연습을 해봅시다. 아래와 같이 html 안에 test.jpg 를 보여주고 있는 이미지 태그가 있을 때, 이미지를 new.jpg 라는 이미지로 바꾸고 싶으면 어떻게 해야 할까요?

    <!-- index.html -->
    
    <h4 id="title">안녕하세요</h4>
    <a href="naver.com" class="link">링크</a>
    <button id="button">버튼</button>
    <img id="image" src="test.jpg" />
    <script src="index.js"></script>

    // index.ts
    
    let img = document.querySelector("#image");
    
    if (img instanceof HTMLImageElement) {
      img.src = "new.jpg";
    }

---

12. 추가로 바꾸고 싶은 html 요소가 많을 때는 어떻게 해야할까요?

    <!-- index.html -->
    
    <a class="naver" href="naver.com">링크</a>
    <a class="naver" href="naver.com">링크</a>
    <a class="naver" href="naver.com">링크</a>

    // index.ts
    
    let link = document.querySelectorAll(".naver");
    
    link.forEach((a) => {
      if (a instanceof HTMLAnchorElement) {
        a.href = "kakao.com";
      }
    });

---

지금까지 타입스크립트로 HTML 변경과 조작할 때 주의점에 대해 살펴보았습니다. 다음 시간에는 class 만들 때 타입을 지정하는 방법에 대해 알아보겠습니다.