TypeScript로 HTML 조작하기

TypeScript로 Html 조작 가능하다.

 

document.getElementById()를 TS에서 어떻게 쓰는지 알아보자

 

 

1. html을 준비

 

 

 

2. Null을 더욱 세세하게 잡아주는 strict 추가

 

 

이제 TS를 이용해서 HTML 조작을 해보겠습니다.

 

.TS 조작하기

 

 

 

<H4>안의 글자를 TS로 바꿔보자

 

let 제목 = document.querySelector("#title"); //Selector로 title찾기

 

ts는 애매한 변수보다 확정적인 타입을 좋아한다.

 

제목은 null일 수 있습니다.

 

HTML 조작시 narrowing하는 방법 5가지!

 

 

narrowing이란?)  TypeScript에서 값의 타입을 좁혀가는 과정을 말합니다. 이는 Union 타입이나 any와 같은 포괄적인 타입에서 특정한 세부 타입으로 좁혀서 TypeScript가 더 정확하게 타입을 추론할 수 있도록 하는 방법입니다.

 

1.

앞에서 말했듯이 ts는 애매한 타입을 싫어해서 

 

let 제목 = document.querySelector("#title"); //Selector로 title찾기

if (제목 != null) {

  제목.innerHTML = "반가워요";

}

 

h4의 글자를 바꾸려면 narrowing을 잘 해야함.

 

제목의 변수라 null이 아니라면 '반가워요'를 해주세요

 

if (제목 != null) {

  제목.innerHTML = "반가워요";

}

를 기입 시키면됨.

 

 

 

2. instanceof 연산자

 

가장 많이 쓰게될 instanceof Element이다.

 

(제목 instanceof Element)

이 부분에서 왼쪽  제목(오브젝트) 은  오른쪽 Element(클래스명)은 의 자식이냐(인스턴스냐) 확인 할 수 있다.

맞다면 True를 내뱉게된다.

 

 

 

3. as로 확인하기

let 제목 = document.querySelector("#title") as Element; //Selector로 title찾기

  제목.innerHTML = "반가워요";

 

 

document.querySelector("#title") 이 요소는 Element; 타입이라고 간주해주세요.

라는 느낌이다.

 

document.querySelector("#title123")

처럼 title이 아닌 다른 값으로 넣어도 무조건 Element라고 간주가 된다.

 

다만. as는 비상시 쓰거나 100% 확신을 할 때 사용한다.

자주 사용하면 TS의 의미가 없음

 

 

 

4.  오브젝트에 붙이는 ?.  사용

 

let 제목 = document.querySelector("#title"); //Selector로 title찾기

if (제목?.innerHTML){

  제목.innerHTML = "반가워요";

}

 

이렇게 제목.innerHTML에 ? 를 붙일 수 있는데

 

제목.innterHTML

왼쪽에있는 오브젝트 자료의 무언가를 뽑아서 자료를 변경할 수 있는데.

 

제목?. 을 하게되면 . 이랑 같지만 조건이 붙게된다.

 

1. 제목에 innerHTML이 있으면 출력해주고

2. 없으면 undefined를 출력하라는 뜻

(optional chaning) 이라는 문법이다.

 

 

let 제목 = document.querySelector("#title"); //Selector로 title찾기

if (제목?.innerHTML != undefined) {

  제목.innerHTML = "반가워요";

}

 

이렇게 narrowing이 가능하다.

 

 

 

5. 타입스크립트를 거부하기

 

{

  "compilerOptions": {

    "target": "es5",

    "module": "commonjs",

    "strictNullChecks": true

  }

}

 

strictNullChecks  를 false로 바꿔주면 strict 모드가 꺼져서 NULL를 쉽게 잡지 않는다.

 

 

 

 

 

 

 

 

 

 

 

 

6. <a>태그의 href 속성내용을 바꿔보자

 

 

link의 naver.com 를 카카오로 변경해보자

 

 

let 링크 = document.querySelector(".link"); //Selector로 title찾기

링크.href = 'https:/kakao.com'

 

원래 이렇게 하면되는데 링크.href가 null일 수 있다라며 TS는 잡게된다.

이걸 if문으로 narrowing해줘야되는데,

 

 

if(링크 instanceof Element){

링크.href = 'https:/kakao.com'

}

 

href의 a타입은 필요한 정확한 타입명이있어서 오류가 나게 된다.

 

HTMLAnchor라는 정확한 명이 있는데.

 

if (링크 instanceof HTMLAnchorElement) {

  링크.href = "https:/kakao.com";

}

 

 

 

 

정상적으로 작동된다.

 

 

타입스크립트가 제공하는 html 기본 제공하는 타입이 있는데

 

Element타입을 상속 받아

 

HTMLAnchorElement타입

HTMLHeadingElement타입

HTMLButtonElement 타입 등 등 상속받아 사용하는 타입이있다.

 

Element는 정의 안되어있는 광범위 한 타입인데.

 

HTMLAnchorElement은 

href, style, class 이런거 쓸 수 있어요~~~

 

HTMLButtonElement  타입은 ~~~ 쓸 수 있어요 등등 

상세하기 정의되어있다.

 

 

if (링크 instanceof HTMLAnchorElement) {

결국, a의 세부속성을 정의하듯이

element의 상세한 narrowing을해야 ts에서 세부속성을 잘 정의해줄 수 있다.

 

 

즉, 

<button> 태그면 HTMLButtonElement

<h1> 태그면 HTMLHeadingElement 등등 쓴다고 알아만 두면 된다.

.. <태그>마다 정해져있음

 

 

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

 

let 버튼 = document.querySelector("#button"); //Selector로 title찾기

버튼?.addEventListener('click,' function(){

 

})

 

addEventListener로 이벤트를 추가할 수 있는데

 

버튼에 narrowing이 또 필요하다.

 

 

버튼?.addEventListener

 버튼에 addEventListener 가능하면 해주고 아니면 undefined를 뱉으라는 말

이것도 narrowing으로 인정해준다.