HTML에서 TypeScript를 이용하기

10830 단어 typescripttypescript

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");
  });
[백준1874] 스택 수열 (C++)
@field를 사용하여 Kotlin에서 Spring 부트 유효성 검사

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage