HTML에서 TypeScript를 이용하기
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을 이용하여 다음과 같이 narroing 할 수 있다.
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");
});
Author And Source
이 문제에 관하여(HTML에서 TypeScript를 이용하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@boorook/TypeScript를-이용한-HTML-조작저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)