타입스크립트 시작

오의석·2022년 10월 5일

공부 타입스크립트

프론트엔드 공부

목록 보기

2/5

1. 시작

(1) 설치

npm install -g typescript (npm 먼저 설치 해줄 것)

(2) 빌드

tsc xxxx.ts
-> js파일로 생성된다.

(3) 타입스크립트 프로젝트 만들기

tsc --init

(4) tsconfig.json 기본 세팅

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

(5) 컴파일

tsc
-> ts파일이 자동으로 javaScript로 변환 된다.

2. 간단한 테스트

(1)index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h4 id="title">안녕하세요</h4>
    <a href="https://naver.com" class="link">링크</a>
    <button id="button">버튼</button>

    <script src="./ts/test.js"></script>
  </body>
</html>

(2) test.ts (ts폴더에 있으며, tsc로 컴파일 하여 사용했음)

let btn = document.getElementById('button');
btn?.addEventListener('click', function () {
  let links = document.getElementsByClassName('link');

  if (links != null) {
    for (let link of links) {
      if (link instanceof HTMLAnchorElement) {
        link.href = 'https://kakao.com'
      }
    }
  }
})