[TypeScript] TypeScript로 HTML 조작하기

Dorong·2022년 12월 23일
0

TypeScript

목록 보기
5/15

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 = ''};





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

profile
🥳믓진 개발자가 되겠어요🥳

0개의 댓글