Type Script로 HTML 변경과 조작 (instanceof, optional chaining)

HTML

<h4 id="title">hello World!</h4>
<a href="naver.com" class='link'>link</a>
<button id="button">button</button>

<script src="index.js"></script>

 

TS

let title = document.querySelector('#title');
title.innerHTML = 'Hi';

 

위와 같이 코드를 입력하면 에러가 난다. 바로, 타입을 하나로 확정 지어주지 않았기 때문이다.

 

현재 title.innerHTML = 'Hi' 는 Union Type이다.

( id를 잘못 입력할 시, Null 반환하고, 잘 입력하면 Element를 반환한다. )

 

이를 방지하기 위해 Narrowing을 사용해야한다. 즉, 타입을 하나로 확정 지어야 한다.

 

따라서 다음과 같이 코드를 짜 줘야한다.

let title = document.querySelector('#title');
if(title != null){
	title.innerHTML = 'Hi'
}

 

narrowing 할 수 있는 방법은 5가지가 있는데 그 중 첫 번째가 바로 위 처럼 if조건문을 사용하여 연산자로 타입을 확정하는 방법이다.

 

그럼 두 번째 방법을 알아보자.

 

바로 instanceof 연산자 이다. ( ★가장 많이 쓰게 된다★ )

let title = document.querySelector('#title');
if(title instanceof Element){
	title.innerHTML = 'Hi'
}

 

기본적으로 Selector는 Object를 반환한다.

 

title이 Element의 자식인지 확인하고 맞다면 true를 반환하도록 하는 것 이다.

 

다음으로 세 번째 방법을 알아보자.

 

Assertion을 사용하여 타입을 덮어 씌우는 것 이다.

let title = document.querySelector('#title') as Element;
title.innerHTML = 'Hi'

 

Null 값이든 뭐든 간에 무조건 Element로 간주를 하라는 것이다.

 

단, as는 되도록 사용해서는 안된다.

 

다음을 네 번째 방법을 알아보자.

 

Object 타입에 붙이는 '?.' 을 이용하는 것이다.

let title = document.querySelector('#title');
if(title?.innerHTML != undefined){
	title.innerHTML = 'Hi'
}

 

위에서 말 했듯이 Selector는 Object를 반환 하므로 Object문법을 사용 할 수 있다.

 

이때 '?.' 은 일반 '.' 을 사용할 때와 같지만,

'?.' 문법은 위 코드로 예를 들자면 제목에 innerHTML이 있으면 출력해주고 없으면 undefined를 출력 해 주라는 뜻이다.

( optional chaining 문법 이라고 한다. )

 

마지막으로, Type Script를 쓰지 않는 것과 동일한 strict 모드를 해제하는 것 이다.

 

기존에 tsconfig.json에 설정한 strictNullchecks를 삭제하면 오류가 발생하지 않는다.

( TypeScript 를 안 쓰는것 과 같다. )

 

 결국 Type Script를 사용하게 되면 Narrowing 과정을 거치게 된다.

 

단, 주의할 점이 있다. TypeScript는 각 HTML 태그 종류별로 정확한 타입 명칭이 있다.

 

단순하게 Element로 기입 하는 것이 아닌, 아래와 같이 HTMLAnchorElement로 입력해주어야 한다. ( a 태그의 경우. )

 

let link = document.querySelector('.link');
if(link instanceof HTMLAnchorElement){
	link.href = 'https://lsiron.tistory.com'
}

 

Selector 로 찾으면 일단 Element 타입으로 부여가 되는데, 아직 이 태그에 대한 자세한 타입이 아닌, 광범위한 타입을 하나 지정해주는 것이다.

 

따라서 이 Element 보다 더 상세한 타입으로 지정을 해 주어야 하는데, 상세한 타입이 바로

 

a태그는 HTMLAnchorElement, h1 태그는 HTMLHeadingElement, button 태그는 HTMLButtonElement..  이런 것 들이다.

 

보통 Element를 입력하면 자동완성이 되므로 달달 외울 필요는 없다.

 

이제 TypeScript에서 eventListener의 사용법에 대하여 알아보자.

let button = document.querySelector('#button');
button?.addEventListener('click', function () {
    
})

 

위 코드와 같이 '?.' 문법을 사용해서 Element 또는 undefined 를 반환하도록 하면 된다.

 

 

 

 

참조 : 코딩애플