Typescript - Html Dom 조작

오늘의 한마디

타입스크립트 스트릭

//tsconfig.ts
{
    "compilerOptions": {
        "target": "ES5",
        "module": "commonjs",
        "strictNullChecks": true
    }
} 

스트릭체크는 null타입까지 확인해주는 옵션으로 더욱 엄격하게 타입스크립트를 사용 할 수 있다.
html 돔조작 할 시 유용하다.
그 이유는 아래를 천천히 살펴보자.

타입스크립트 html 돔 조작

let dom = document.querySelector("#title")

dom.innerHTML = '제목입니다.'

기존 자바스크립 였다면 문제가 되지 않지만 타입스크립트에서 셀렉터를 이용 할 시
유니온 타입으로 잡힌다.
Element | null 이런 식의 유니온타입을 가지게 되는데(해당 아이디를 가진 dom이 존재할수도 있고 없을 수도 있기때문이다.)
이것을 지난 시간에 배운 type Narrowing을 해줘야한다.

첫번째 방법

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

Narrowing에서 기본적인 if문을 사용하여 걸러줄수도 있다.

두번째 방법

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

instanceof를 사용하는것이다. 여기서 문제점! 무조건 HTMLElement를 사용하면 안된다.
왜냐!! 왜냐고?!!

자 a태그의 href값을 변경해주려고 한다고 생각해보자?!

let dom = document.querySelector('#title');
if (dom instanceof HTMLElement) {
  dom.href = 'https://www.naver.com'
}
// 오류... 더 자세한 엘리먼트 타입을 기입해줘야한다.

if (dom instanceof HTMLAnchorElement) {
  dom.href = 'https://www.naver.com'
}
// ok

타입스크립트는 항상 엄격하게 작성!
HTMLAnchorElement 타입으로 자세하게 해줘야 오류가 나지않음
Element type도 정말 여려가지가 있는듯한데 나중에 따로 정리하는 글을 작성하겠다!
리액트도 그렇고 리덕스도 그렇고 요새나오는 라이브러리나 프레임워크 마다 또 타입스크립트 타입이 따로 존재
하는것들이 있는데 한번에 정리하는 시간을 가지겠습니다~

세번째 방법

let dom = document.querySelector('#title');
if (dom?.innerHTML != undefined) {
  dom.innerHTML = '타입스크립트 너 까다롭구나...'
}

옵셔널체이닝을 이용해서도 가능하다.

타입스크립트 공부 하시는 분들에게 한마디 하자면
타입스크립트는 오류나더라도 자바스크립트로 컴파일 되었을때 실행되기는 합니다.
왜냐하면 타입스크립트는 사전에 타입이 잘못되어 런타임 오류같은것들 잡아주기 위해 만들어진 것이기
때문이니 너무 무서워 하지말아요 ㅠㅠ (나한테 하는말)