TypeScript로 HTML 작성하기

tsconfig.json 생성 후 하단 코드 추가로 입력하기

{   
  "compilerOptions" : {     
    "target": "es5",     
    "module": "commonjs",
    "strictNullChecks":true //null타입이 들어올 때 엄격하게 체크해라
  } 
}

id가 title인 요소를 변경해보자

let 제목 = document.querySelector('#title');
제목.innerHTML = '반가워요' //h안에 글자를 바꾸는 코드

ts에서는 union타입으로 인식되어서 오류가 남
type을 narrowing 해줘야함!

HTML 조작식 Narrowing 하는 방법 5개

if문

let 제목 = document.querySelector('#title');
if(제목 != null){
	제목.innerHTML = '반가워요' //h안에 글자를 바꾸는 코드
}

selector을 통해서 찾은 변수는 null일 수도 있기 때문에 이러한 과정이 필요하다.

2. instanceof 연산자

let 제목 = document.querySelector('#title');
if(제목 instanceof Element){
	제목.innerHTML = '반가워요' //h안에 글자를 바꾸는 코드
}

instanceof 연산자는 클래스 명을 기입하고 왼쪽에 오브젝트에 기입하면
"왼쪽이 오른쪽의 자식인지, instance가 맞는지" 확인해주고 true, false 값을 반환

3. as이용하기

let 제목 = document.querySelector('#title')as Element; //element 타입으로 확정해주기
	제목.innerHTML = '반가워요' //h안에 글자를 바꾸는 코드

비상시 쓰거나, 100%확신을 할 때 쓰는 것이 중요함
아무때나 사용하면 TypeScript를 사용하는 의미가 없어짐

4. 오브젝트에 붙이는 ?

let 제목 = document.querySelector('#title')
	if(제목?.innerHTML != undefined){//1. 제목에 innerHTML이 있으면 출력, 2. 없으면 undefined뱉기(optional chaining)
	제목.innerHTML = '반가워요' 
    }

5. strict 모드 끄기

"strictNullChecks":true 

이부분 삭제하기

그냥 자바스크립트를 사용하더라도 이런식으로 코드짜면 안전하고 좋다.

a태그의 href 속성내용을 바꿔보자

let 링크 = document.querySelector('.link');
	if(링크 instanceof HTMLAnchorElement){ //a태그에 필요한 정확한 타입명이 있음
		링크.href='https://kakao.com'
  }

그냥 element라고 하면 안되고 정확한 타입명인HTMLAnchorElement라고 해야함

Element 타입
1. HTMLAnchorElement 타입 (href, style, class 쓸 수 있음- object 타입정의 잘 되어있음)
2. HTMLHeadingElement 타입
3. HTMLButtonElement 타입

타입스크립트에서 eventListener 부착하는 법

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

버튼에 addEventListener 가능하면 해주시고 아니면 undefined 뱉기