[TypeScript] TypeScript로 HTML 조작하기

TypeScript와 함께 HTML을 조작해보쟈

• 일단 tsconfig.json 파일에 "strictNullChecks" : true를 추가해 null타입에 대한 엄격한 체크를 해주자
• html문서의 'title'이란 id를 가진 요소의 innerHTML을 변경해보자

  let title = document.querySelector('#title');
  title.innerHTML = 'Hello!!'    // 오류!!!

• 코드를 입력하면 오류가 나는것을 확인할 수 있음
• 오류문을 살펴보면 title의 타입이 (Element | null)로 지정되어있음을 확인할 수 있음
• 이 말인 즉 type narrowing이 필요하다는 뜻!!
  
  
  

✅ type narrowing하기

1. if

   if(title != null){title.innerHTML = 'Hello'};

2. instance of

   if(title instanceof Element){title.innerHTML = 'Hello'};

3. optional chaining

   if(title?.innerHTML != undefined){title.innerHTML = 'Hello'};

4. assertion

   // 선언부에서
   let title = document.querySelector('#title') as Element;

다양한 태그에서 활용 예시

• html 요소를 불러올 때 Element 타입을 상속하는 상세한 타입들이 있음
• 그리고 해당 상세 태그에 해당되는 옵션 내용들이 잘 들어있음

1. anchor

let link = document.querySelector('#link');
link.href = 'https://www.naver.com'    
// 이렇게만 쓰면 오류
// 상세태그로 narrowing 필요
if(link instanceof HTMLAnchorElement){link.href = 'https://www.naver.com'}

2. button

let btn = document.querySelector('#btn');
btn?.addEventListener('click', function(){alert('Hi!!')});

3. img

let img = document.querySelector('#img');
if(img instanceof HTMLImageElement){img.src = ''};

🌟 잘못된 부분에 대한 말씀은 언제나 저에게 큰 도움이 됩니다. 🌟
👍 감사합니다!! 👍