[Typescript] Ts로 DOM조작하기

타입스크립트로도 DOM을 조작하는 방법은 같습니다.

const btn = document.querySelector('.button')
btn.textContent = 'click'

 

하지만 이렇게적으면 타입스크립트에서는 오류가 나옵니다.

 

그 이유는 btn에 클래스명으로 'button'이아니라 오타를 내서 'buttom'이런식으로 적으면 btn이 null인지 있는 요소인지 정확하지 않

기 때문입니다.

 

때문에 타입스크립트로 DOM을 조작하려면 Narrowing을 해주어야 합니다.

const btn = document.querySelector('.button')
if(btn !== null){
btn.textContent = 'click'
}

 

타입스크립트에서는 이런식으로 Narrowing할 수 있는 방법이 더 있습니다

---

 

instanceof는 해당 객체(또는 생성자함수)가 인스턴스인지를 확인해줍니다.

const btn = document.querySelector('.button')
if( btn instanceof Element){
btn.textContent = 'click'
}

 

Element에는 HTMLHedingElement, HTMLAnchorElement등 여러 Element가 있으니 골라서 사용해야합니다.

 

또 assertion문법으로 해당 문법의 타입을 지정해주는 방식도 있습니다.

 

const btn = document.querySelector('.button') as Element
btn.textContent = 'click'