[TypeScript] TypeScript 활용하여 HTML 구현해보기

 

기존 HTML 코드를 TypeScript를 활용하여 구현해보자.

먼저 터미널창에서 tsc -w 를 입력하여 ts파일을 js파일로 자동 변환하게 만들주자.

두번째로 tsconfig.json 파일에서

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strictNullChecks": true
  }
}

위 코드처럼 세팅을 해줍니다. 여기에서 "strictNullChecks": true 는 가끔 null 타입이 들어오는데 그걸 엄격하게 체크해 달라는 의미입니다.

 

index.js

<h4 id="title">안녕하세요</h4>
<a href="naver.com" class="link">링크</a>
<button id="button">버튼</button>

<script src="index.js"></script>

index.js(변환된 ts파일)으로 연결을 해둡니다.

 

index.ts

let 제목 = document.querySelector("#title");
if (제목 != null) {
  제목.innerHTML = "반가워요";
}

let 제목 = document.querySelector("#title") as Element; 
// as를 활용하면 되지만 좋은 방법은 아니다.
if (제목 != null) {
  제목.innerHTML = "반가워요";
}

let 링크 = document.querySelector(".link");
if (링크 instanceof HTMLAnchorElement) {
  링크.href = "htts://kakao.com";
}

let 버튼 = document.querySelector("#button");
버튼?.addEventListener("click", function () {});

위 코드처럼 != null 이 소스가 없다면 #title.이 없을시 null이 반환되기 떄문에 error가 생깁니다.

그래서 if (제목 != null) 같이 조건을 달아줘야합니다.

또는 instanceof 를 쓰는데 이 연산자는 오른쪽에 클래스명을 기입을 하고 왼쪽에 오브젝트를 기입하는데 오브젝트가 오른쪽에 있는 클래스의 자식(인스턴스)인지 확인하는 연산자입니다.

a 태그 같은경우 정확한 Element 타입을 줘야 합니다.