[ Typescript ] 타입스크립트를 사용하는 이유

타입스크립트 왜 사용할까?

 

타입스크립트는 자바스크립트에 타입을 부여한 자바스크립트의 확장된 언어라고 볼 수 있다.

자바스크립트만으로도 충분히 개발 할 수 있는데 왜 굳이 타입스크립트를 사용해야 할까? 라는 의문이 들었다.

단지 최신 기술이라서? 혹은 다른 사람들도 많이 사용하니까 나도 써야 하는 걸까? 라는 생각이 들었다.

 

공부를 계속 하면서 2가지 관점에서 자바스크립트 코드의 품질과 개발 생산성을 높일 수 있다는 결론을 냈다!

 

 

 

 

 

 

사전의 에러 방지

 

타입스크립트는 사전에 에러를 방지 할 수 있다.

 

function sumJs(a, b) {
  return a + b;
}

function sumTs(a: number, b: number) {
  return a + b;
}

 

 

sumJs는 자바스크립트, sumTs는 타입스크립트로 작성한 숫자를 더하여 리턴해주는 함수이다.

 

 

sum(10, 20); // 30

 

sum함수를 이용하여 10과 20을 더하면 30을 리턴해준다.

그런데 만약 아래와 같이 함수를 호출하면 어떻게 될까?

 

sum('10', '20'); // 1020​

 

숫자가 아닌 문자열을 더하기 때문에 1020이라는 값이 나올 것이다.

타입스크립트는 이러한 의도하지 않은 코드의 동작을 예방할 수 있다.

 

 

 

 

 

 

 

 

 

코드 자동완성과 가이드

 

타입스크립트의 또 다른 장점은 코드를 작성할때 개발툴의 장점을 최대치로 사용 할 수 있다.

개발을 할 때 제일 많이 사용하는 vscode는 툴의 내부가 타입스크립트로 작성되어 타입스크립트에 최적화 되어있다.

 

function sumJs(a, b) {
  return a + b;
}

let total = sumJs(10, 20);
total.toLocaleString();

 

두 숫자의 합을 구해 toLocaleString()을 적용했다.

위와 같이 코드를 작성할 때, 자바스크립트는 total이라는 변수를 사용하는 시점에서 타입을 인지하지 못한다.

 

즉, 개발자가 스스로 함수의 결과를 예상하고 타입이 number 라고 가정한 상태에서 number의 API인 toLocaleString을 코딩하게 된다.

 

 

위와 같이 total이라는 값이 정해져있지 않기 때문에 자바스크립트 Number에서 제공하는 API인 toLocaleString()을 직접 작성했다. 만약 오타라도 나서 toLocalString() 라고 작성했다면 이 오류는 함수를 실행했을 때만 확인 할 수 있었을 것이다.

 

 

 

 

타입스크립트를 사용하면 어떻게 될까?

function sumTs(a: number, b: number): number {
  return a + b;
}
let total = sumTs(10, 20);
total.toLocaleString();

 

 

변수 total에 대한 타입이 지정되어있기 때문에 해당 타입에 대한 API를 미리보기로 띄워줄 수 있다.