[ TypeScript ] js 파일 ts로 변환

using-ts.js 파일을 using-ts.ts 파일로 바꾸니 아래와 같이 VScode에서 빨간 줄이 생겼다.

 

const button = document.querySelector("button");

const input1 = document.getElementById("num1");
const input2 = document.getElementById("num2");

function add(num1, num2) {
  return num1 + num2;
}

button.addEventListener("click", function() {
  console.log(add(input1.value, input2.value));
});

 

 

 

! 와 HTMLInputElement 추가

---

const button = document.querySelector("button");
// 느낌표를 추가해줌으로써 요소를 얻을 것임을 타입스크립트에게 알릴 수 있다.
// !를 해주면 기본적으로 타입스크립트에게 결코 null이 나오지 않을 것임을 알려준다.

// 그리고 아래는 항상 input 요소이기 때문에 형변환이라는 HTMLInputElement로 
// 나중에 타입스크립트에 어떤 유형의 요소인지를 알려준다. 
const input1 = document.getElementById("num1")! as HTMLInputElement;
const input2 = document.getElementById("num2")! as HTMLInputElement;

function add(num1, num2) {
  return num1 + num2;
}

button.addEventListener("click", function() {
  console.log(add(input1.value, input2.value));
});

 

 

num1 & num2에 타입 지정

---

 

 

num1과 num2의 타입은 number로 지정을 해주면 input.value에 빨간줄이 생긴다.

 

 

add의 인자 두개는 number만 받는데 input1.value는 string이다.

 

 

아래와 같이 "+"를 덧붙여주니 문제가 해결되었다.

button.addEventListener("click", function() {
  console.log(add(+input1.value, +input2.value));
});

 

 

컴파일 명령어

---

아래의 명령어로 실행하면 .js파일이 생성된다.

이유는 기본적으로 타입스크립트는 여전히 자바스크립트로 컴파일하므로 자바스크립트 파일을 가져온다.

tsc 파일이름.ts

 

 

index.html 

---

마지막으로 html 파일에서 만들어진 js파일명을 적어주고 라이브 서버를 켜면 잘 작동한다. 

<script src="using-ts.js" defer></script>

 

 

결과

---

더해진 두 숫자 콘솔창에 출력!