타입스크립트의 장점과 사용 이유

 

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

console.log(add('2', '3'));

 

자바스크립트를 이용하여 작성한 이 예시는 우리의 논리의 흐름대로 '5'가 나오지 않고 문자열로 이어 붙이는 '23'이 나오게 됩니다.

이러한 에러를 더 복잡한 코드를 사용하여 해결할 수 있겠지만 타입스크립트를 이용하면 개발 도중에 더 빨리 포착하고 해결할 수 있습니다.

 

using-ts.ts

const button = document.querySelector("button")! as HTMLButtonElement;
const input1 = document.getElementById("num1")! as HTMLInputElement;
const input2 = document.getElementById("num2")! as HTMLInputElement;

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

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

 

또 타입스크립트를 작성하고 터미널에 tsc using-ts.ts를 치면 자동으로 자바스크립트 파일로 컴파일해 줍니다.

 

using-ts.js

var button = document.querySelector("button");
var input1 = document.getElementById("num1");
var input2 = document.getElementById("num2");
function add(num1, num2) {
    return num1 + num2;
}
button.addEventListener("click", function () {
    console.log(add(+input1.value, +input2.value));
});

 

 

• 이렇게 타입을 이용해 작동 방식에 대해 훨씬 더 명시적이어야 하며 예상치 못한 에러를 피할 수 있게 됩니다.

 

• 최신 IDE를 사용할 수 있으며 이는 더 나은 자동 완성 기능을 제공하고 코드를 컴파일하기 전에 에러를 먼저 보여줍니다. 프로젝트 진행하며 멘토님이 알려준 타입스크립트의 강한 장점 중 하나입니다.

 

• 차세대 자바스크립트 기능도 타입스크립트를 통해 작성하고 사용하면 자바스크립트 코드로 컴파일되기 때문에 구형 브라우저에서도 작동할 수 있습니다. 이는 바닐라 자바스크립트의 바벨과 같은 기능입니다.

 

• 인터페이스와 일반 기능과 같은 타입스크립트만 이해할 수 있는 특정한 기능들을 추가할 수 있습니다.