0. 설정 및 예시 HTML 파일
-
tsconfig.json에서 "strictNullChecks": true로 설정하기
-
tsc -w를 통해 타입스크립트 파일이 변환된 자바스크립트 파일 생성 -
html 파일에서 변환된 자바스크립트 파일을 불러와서 사용
-
html 파일 예시
<!DOCTYPE html> <html> <head> </head> <body> <h1 id="title">제목</h4> <a href="https://www.velog.io/@boorook">링크</a> <img id="image" src="myImage.jpg" /> <button id="button">버튼</button> <script src="HTML.js"></script> </body> </html>
1. Element 불러오기(Narrowing)
let 제목 = document.querySelector("#title");위와 같이 querySelectory로 불러온 값은 element type이지만 null 값도 될 수 있다. 따라서 narrowing을 해줘야 한다.
let 제목 = document.querySelector("#title");
// narrowing 방법1
if (제목 != null) {
제목.innerHTML = "반가워요";
}
// narrowing 방법2 - 가장 많이 사용됨
if (제목 instanceof Element) {
제목.innerHTML = "반가워요";
}
// narrowing 방법3
let 제목2 = document.querySelector("#titile") as Element;
제목2.innerHTML = "반가워요";Optional Chaining을 이용하여 다음과 같이 narrowing 할 수 있다.
if (제목?.innerHTML != undefined) {
제목.innerHTML = "반가워요";
}제목?.innerHTML은 제목 오브젝트에 innerHTML이 있으면 뱉고, 없으면 undefined를 뱉는다. 위 코드가 자바스크립트로 변환되면 아래와 같이 변한다.
if ((제목 === null || 제목 === void 0 ? void 0 : 제목.innerHTML) != undefined) {
제목.innerHTML = "반가워요";
}2. 태그별 사용법
a태그를 불러와서 조작할 때에는 instanceof Element로 하면 안되고 instanceof HTMLAnchorElement를 이용하여 narrowing 해야 한다.
let 링크 = document.querySelector(".link");
if (링크 instanceof HTMLAnchorElement) {
링크.href = "https://kakao.com";
}태그마다 정해진 세부 element로 잘 사용해야 한다.
a: HTMLAnchorElement
button: HTMLButtonElement
h1: HTMLHeadingElement
img: HTMLImageElement
또는 아래와 같이 optional chaining을 이용한다.
let 버튼 = document.querySelector("#button");
버튼?.addEventListener("click", () => {
alert("button is clicked");
});