[TypeScript] HTML 조작 및 주의점

strictNullCheck 

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

변수 조작을 하기 전에 null인지 확인하는 작업은 중요하다.

특히 html 조작을 할 때 셀렉터로 찾으면 null인 경우가 꽤 발생하니 많은 도움이 된다. 

 

그러므로 tsconfig.json에 strictNullChecks 옵션을 켠다면 null이 들어왔는지 아닌지 확인할 수 있다. 

 

HTML 찾고 변경하기 

let title = document.querySelector("#title");
title.innerHtml = "Hello";  // 에러

querySelector로 조회하고 innerHtml로 변경하는 방식은 자바스크립트라면 문제가 없는 방식이지만, 

타입스크립트에서는 에러가 난다. 

 

" title이라는 변수가 null 일 수 있다 " 는 이유로 말이다. 

strictNullChecks 옵션을 켜서 이런 에러가 발생하는데, 셀렉터로 html을 찾으면 타입이 Element | null 이기 때문이다. 

 

해결책으로는 

1. narrowing을 한다.
2. assertion을 사용한다. 
3. optional chaining 연산자를 사용한다.
4. strick 설정을 끈다.

narrowing

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

if(title !== null) {
	title.innerHtml = "hello";
}

title이 null인지 확인하고 null이 아니면 처리하는 방식으로 작업할 수 있다. 

 

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

if(title instanceof HTMLElement) {
	title.innerHtml = "hello";
}

instanceof라는 연산자를 사용해서 처리할 수 있다. 

instanceof 연산자는 우측의 타입이 맞는지 확인해서 체크해주는 연산자이다. 

 

assertion

let title = document.querySelector("#title") as HTMLElement;

title.innerHtml = "hello";

as 키워드를 사용하면 타입을 속여 타입스크립트에서 사용할 수 있다. 

하지만 정말 틀린 경우 정답이 될 수 없으므로 사용하지 않는 것을 추천한다. 

 

optional chaining 연산자

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

if(title?.innerHtml !== undefined) {
	title.innerHtml = "hello";
}

자바스크립트의 신문법으로 object 자료 안에 innerHtml이 존재하면 true 없다면 undefined를 리턴한다. 

 

가장 좋은 방법은 narrowing에서 instanceof 연산자를 사용하는 것이다. 

 

let link = document.querySelector("#link");

if(link instanceof HTMLElement) {
	link.href = "https://naver.com"   // 에러
}

HTMLElement 타입은 href 속성이 없기 때문에 에러가 발생한다. 

 

let link = document.querySelector("#link");

if(link instanceof HTMLAnchorElement) {
	link.href = "https://naver.com"   // 에러
}

html 태그의 종류별로 정확한 타입 명칭이 있고, 타입별로 특수하게 가지고 있는 기능이 있기 때문에 

정확한 타입으로 narrowing을 해줘야 html 속성을 수정할 수 있다. 

 

이벤트 리스너 추가하기 

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

buttons이라는 변수도 null 일 수 있기 때문에 마찬가지로 에러가 난다. 

 

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

빠른 처리 방법으로 optional chaining을 사용하면 해결이 가능하다. 

button이라는 id를 가진 태그가 없다면 undefined를 내보내고, 있다면 addEventListener 함수를 사용할 수 있다.