strictNullCheck 옵션 켜기
tsconfig.json 파일에 들어가서
strict 옵션을 true 로 켜준다.
strictNullChecks 만 켜줘도 된다. (strict 안에 strictNullChecks 가 들어가 있다)
변수를 조작하면서 null 인지 체크할 때 유용하다
HTML 파일
script 태그에 변환된 index.js 를 적어서 연결해준다.
HTML 찾아 변경하기
h4 제목을 다른 글자로 변경하려고 한다.
위 코드처럼 일단 '제목' 이라는 변수에 document.querySelector 를 통해 title 이라는 id 를 가진 object 를 가져온 후,
narrowing 을 통해 null 이 아닌지 체크후에
null 이 아니라면 제목.innerHTML 을 '반갑소' 로 바꿔줬다.
instanceof 라는 키워드를 사용할 수도 있다.
위 예시처럼 제목이 HTMLElement 의 instance 인지 확인 후,
맞다면 제목.innerHTML 을 '반갑소' 로 바꾸는 것이다.
또는 optional chaining 연산자를 사용할 수도 있겠다.
자바스크립트의 신문법인데,
왼쪽에 있는 object 자료안에 .innerHTML 태그가 존재하면 그걸 쓰고, 없으면 undefined 를 남겨라-
라는 의미이다.
여기까지 한 것처럼 null 체크를 하는게 귀찮다면 아까 설정했던 strict 설정을 false 로 바꿔줄수는 있다 😅
제일 괜찮은 방법은...
제일 좋은 방법은 instanceof 키워드를 사용하는 것이다.
만약에 html 파일에 있는 a 태그의 속성을 바꾸고 싶다면 아까처럼 이렇게 작성해볼 것이다.
let 링크 = document.querySelector('#link');
if (링크 instanceof HTMLElement) {
링크.href = 'https://kakao.com' //에러
}하지만 이렇게 하면 에러가 난다.
왜냐면 '링크' 는 HTMLElement 가 아니라 HTMLAnchorElement 에 해당하기 때문이다.
각 html 태그 종류별로 정확한 타입 명칭이 있다.
예를 들어 img 태그는 HTMLImageElement, h4 태그는 HTMLHeadingElement 등... 이다.
이렇게 정말 많은데 정확한 타입으로 narrowing 을 해주어야 html 속성 수정을 제대로 할 수 있다.
selector 로 찾으면 일단 Element 타입이라는게 부여가 되는데,
아직 이 태그에 대한 자세한 타입이 아닌, 광범위한 타입을 하나 지정해주는 것이다.
이 Element 보다 더 상세한 타입들이 HTMLAnchorElement 이런것들이다.
이벤트리스너 부착하기
let 버튼 = document.getElementById('button');
버튼?.addEventListener('click', function(){
console.log('안녕')
})addEventListener 함수를 붙일 때 물음표를 붙일 수 있는데
optional chaining 신문법이다.
예를 들어서 원래는 object.속성 이런식으로 자료를 뽑아내는데
object?.속성 이렇게 뽑을 수도 있다.
만약에 물음표를 붙이면 자료가 object 에 존재하면 뽑아주고, 없으면 undefined 로 남겨주세요- 라는 의미이다.(위에서 말했듯)
ref: 코딩애플
