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");
  });

좋은 웹페이지 즐겨찾기