타입스크립트 - HTML 조작

자바스크립트의 주 목적은 단연 html 조작과 변경이다. 타입스크립트에서의 html 조작은 자바스크립트와 약간 다르다.

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

우선 tsconfig에서 strictNullCheck 옵션을 킨다.

strictNullCheck는 많은 환경에서 null이 들어올 경우 체크해주는 옵션이다.

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

자바스크립트에서 위와 같이 코드를 짜면 'title'이라는 아이디를 가진 요소의 값을 '반갑소'로 바꿔준다. 하지만 타입스크립트에서는 에러를 내준다. 그 이유는 셀렉터로 요소를 찾으면 타입이 Element | null 이여서 '제목이라는 변수가 null일 수 있다.' 라는 에러를 내준다.

따라서 Narrowing이나 Assertion을 사용해야한다.

Narrowing 사용

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

====================================================

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

instanceof는 typeof처럼 왼쪽의 변수가 우측에 적은 타입인지 체크해준다.
그리고 html 태그 종류별로 타입명칭이 다 다르다.
a 태그는 HTMLAnchorElement, img는 HTMLImageElement, h4태그는 HTMLHeadingElement 이런식으로 매우 많다.

Assertion 사용

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

optional chaining 연산자

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

옵셔널 체이닝은 ? 왼쪽에 있는 object 자료가 있으면 .다음의 요소가 존재하면 쓰고 없으면 undefined를 남긴다. 위 코드에서는 제목이라는 객체가 있는지 확인하고 안에 innerHtml이 있으면 반갑소로 바꾸라는 의미이다.