[코딩애플] 10.Type Script

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

strictNullCheck 옵션 설정

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

tsconfig.json 파일을 열어서 strickNullChecks 옵션을 true로 변경

"strict" : true 이런걸 써두면 strickNullChecks 옵션도 자동으로 true로 켜짐

 

HTML 파일 준비 

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

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

 

 

타입이 확실하지 않아서 에러를 출력할 때 방법

🍎 해결책 1. narrowing 방법

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

 

 

🍎 해결책 2. 더 좋은 instanceof 사용하는 narrowing 방법 - 가장 좋은 방법

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

instanceof 라는 연산자를 쓰는 것인데 우측에 HTMLElement 입력하면 그 타입인지 체크

 

🍎 해결책 3. assertion 방법

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

as 키워드를 쓰면 타입 속임수 가능

HTMLElement 혹은 Element 사용

 

🍎 해결책 4. optional chaining 연산자 방법

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

innerHTML 작성할 때 엔터키로 자동완성시키면 ?. 이런 연산자가 자동으로 붙습니다.

js 신문법인데 왼쪽에 있는 object 자료안에 .innerHTML이 존재하면 그것을 사용 없으면 undefined 출력 입니다. 

 

🍎 해결책 5. strict 설정을 false 체크 방법

null 체크해주는 것이 번거로우면 strict : false 사용 

---

 

🍎 a 태그의 href 속성을 변경

html 파일에 <a href="naver.com"></a> 이런 태그가 있었습니다.

이 태그의 href 속성을 바꾸고 싶으면 셀렉터로찾고.href = 'https://kakao.com' 이렇게 쓰면 됩니다.

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

에러가 날 경우 그냥 이렇게 바꿔주면 됩니다.

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

 

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

a 태그 : HTMLAnchorElement

img 태그 : HTMLImageElement

h4 태그 : HTMLHeadingElement

..등 이런 정확한 타입으로 narrowing 해주셔야 html 속성 수정을 제대로할 수 있습니다.

잠깐 왜 그래야하는지 원리를 설명하자면
타입스크립트에서 쓸 수 있는 HTML 타입들은 이렇게 됩니다.
Element, HTMLElement, HTMLAnchorElement 등이 있는데
Element에 들어있는걸 복사해서 몇개 더 추가해서 HTMLElement 타입을 만들어놨고
HTMLElement에 들어있는걸 복사해서 몇개 더 추가해서 HTMLAnchorElement 타입을 만들어놨습니다.

셀렉터로 대충 찾으면 Element 타입이라는게 부여가 됩니다.
아직 이 태그가 뭔지 몰라서 그냥 광범위한 타입하나를 달랑 지정해주는 겁니다.
이건 광범위한 그냥 일반 html 태그의 특징을 정리해둔 타입이기 때문에 안에 .href .src 이런거 안들어있습니다.

반면 HTMLAnchorElement 이건 조금 상세한 타입입니다.
이 타입은 "href, style, class, id 이런 속성을 가질 수 있다~" 라고 타입이 정의되어있습니다.
그래서 a태그에게 어울리는 타입인 HTMLAnchorElement 라는 타입을 쓸 수 있는지 instanceof 키워드로 확인해야합니다. 확인하는 과정을 narrowing으로 인정해줌 

- 코딩 애플 -

 

🍎 이벤트리스너 부착해보기

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

 

버튼이라는 변수가 null 일 수도 있다는 에러 발생

해결책

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

addEventListener 함수 사용

optional chaining 신문법
2020년 이후 브라우저들은 ?. 연산자를 이용가능합니다.
그니까 object에서 자료뽑을 때 object.어쩌구 이렇게 자료를 뽑는데
object?.어쩌구 이렇게도 뽑을 수 있다는 겁니다.
이걸 쓰면 어쩌구라는 자료가 object에 존재하면 그거 뽑아주시고요
존재하지 않으면 undefined 남겨주세요~ 라는 뜻과 동일합니다.

그래서 간혹 narrowing할 때 && 연산자로
undefined 체크하기 귀찮을 때 간혹 사용됩니다. 

그래서 혹여나 버튼이라는 변수가 없을 경우 그 자리에 undefined를 내보내고, 

HTMLElement로 잘 있으면 addEventListener() 잘 부착해주기 때문에  

이것도 일종의 narrowing 이라고 보면 되겠습니다. 

---

🍏 (숙제1) 버튼을 누르면 이미지를 바꿔봅시다.

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

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

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

성공여부는 크롬 개발자도구 켜면 src 속성이 잘 바뀌었는지 확인가능하겠죠?

 

답.

let new = document.querySelector('#image');
if (new instanceof HTMLImageElement){
	new.src = '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으로 바꾸고 싶은 겁니다.

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

 

답.

let allLink = document.querySelectorAll('.naver');
if(allLink instanceof HTMLAnchorElement){
	allLink.href = 'https://kakao.com'
}

/*-------------------------- 오답정리 --------------------------*/

let 링크 = document.querySelectorAll('.naver');
    링크.forEach((a)=>{
        if(a instanceof HTMLAnchorElement){
        a.href = 'https://kakao.com'
    }
})
// forEach 방법

let 링크 = document.querySelectorAll('.naver');
for(let i=0; i<3; i++){
    let a = 링크[i];
    if(a instanceof HTMLAnchorElement){
       a.href = 'https://kakao.com'
   }
}
// for 방법