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

본 블로그는 해당 타입스크립트 강의(코딩애플) 수강 후, 작성된 게시물입니다.

더 자세한 설명은 해당 강의를 참고하세요.

https://codingapple.com/course/typescript-crash-course/

빠르게 마스터하는 타입스크립트 - 코딩애플 온라인 강좌

---

<h4>안에 글자를 바꾸기 위해 아래처럼.

//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 제목 = document.querySelector("#title");
제목.innerHTML = "반가워요"; //제목에 에러

에러.

유니언타입이기때문.

 

변경해주고 싶다면 타입을 하나로 narrowing 하면 된다.

 

HTML 조작 시 narrowing 하는 방법

 

1. narrowing 

let 제목 = document.querySelector('#title');
if (제목 != null) {
  제목.innerHTML = '반갑습니다'
}else {
}

 

2. instanceof 사용한 narrowing 

let 제목 = document.querySelector('#title');
if (제목 instanceof HTMLElement) {
  제목.innerHTML = '반갑습니다'
}

 

3. assertion 사용

let 제목 = document.querySelector('#title') as HTMLElement;
제목.innerHTML = '반갑습니다'

 

4. optional chaining 연산자 사용

let 제목 = document.querySelector('#title');
if (제목?.innerHTML != undefined) {
  제목.innerHTML = '반갑습니다'
}

 

5. strict 설정 false로

//tsconfig.json파일
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strictNullChecks": false
  }
}

 

 

a 태그의 href 속성을 바꾸려면

 

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

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

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

html 태그 종류별로 정확한 타입명칭이 있습니다.

a태그는 HTMLImageElement처럼 정확한 타입으로 narrowing해주어야함.

 

타입스크립트에서 eventListener부착하는 법 

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

optional chaining

버튼에 addEventListener 가능하면 하고 아니면 undefined로 남겨라.

 

 

실습1) 버튼을 누르면 이미지를 바꿔봅시다.

<img id="image" src="test.jpg">

html 안에 test.jpg를 보여주고 있는 이미지 태그가 있고

이미지를 new.jpg라는 이미지로 바꾸고 싶으면 자바스크립트 코드를 어떻게 짜야할까요?

 

 

실습2) 바꾸고 싶은 html 요소가 많습니다.

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

3개의 링크가 있는데 이 요소들의 href 속성을 전부 https://kakao.com으로 바꾸고 싶은 겁니다.

자바스크립트 코드를 어떻게 짜야할까요?

다른 방법도 생각해 보자