[Typescript] 왜 타입스크립트를 써야 할까?

타입스크립트란

타입스크립트는 자바스크립트에 타입을 부여한 언어이다. 자바스크립트의 확장된 언어라고 볼 수 있다. 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한 번 변환해주어야 한다. 이 변환 과정을 컴파일(complile) 이라고 부른다.

컴파일은 일반적으로 소스 코드를 바이트 코드로 변환하는 작업을 의미한다. TypeScript 컴파일러는 TypeScript 파일을 자바스크립트 파일로 변환하므로 컴파일보다는 트랜스파일링이 보다 적절한 표현이긴 하다.

                                        자바스크립트 + 타입 = 타입스크립트

왜 타입스크립트를 써야할까

타입스크립트는 아래 2가지 관점에서 자바스크립트 코드의 품질과 개발 생산성을 높일 수 있다.

• 에러의 사전 방지
• 코드 가이드 및 자동완성

---

에러의 사전 방지

//자바스크립트
function sum(a, b) {
  return a + b;
}

//타입스크립트
function add(a: number, b: number): number {
  return a + b;
}

타입스크립트는 앞서 말한 것과 같이 자바스크립트에 타입을 지정할 수 있다. 위의 add함수에서는 인자 a와 b의 타입을 number로 지정하여 받고 있다.

변수 a와 b를 더한 값을 리턴하는 자바스크립트(이하 js)의 sum함수와 타입스크립트(이하 ts)의 add함수의 결과를 살펴보자.

 

sum(10, "10"); // '1010'
add(10, 10); // 20

js의 함수 sum의 경우 변수 b의 타입이 문자열(string)이기 때문에 자동으로 결과값도 문자열로 타입변환이 이루어져 1020이라는 문자열이 리턴된다.
하지만 ts의 add 함수의 경우, 변수의 자리에 문자열타입의 값을 넣게 되면 애초부터 빨간줄로 에러를 알려주게 된다.

따라서 add함수에서는 sum함수처럼 결과값이 문자열로 나오는 등의 예상치 못한 결과를 방지할 수 있게 된다.

코드 가이드 및 자동완성

또한 변수의 타입에 따라 달라지는 인텔리센스(자동완성)도 다르게 표시된다.

인텔리센스

코드 완성, 파라미터 정보, 퀵 정보, 멤버 리스트 등 다양한 코드 편집 기능의 총칭.
"코드 완료", "콘텐츠 어시스트", "코드 힌트"와 같은 다른 이름으로 불리기도 합니다.

js의 sum함수의 리턴값을 total이라는 변수에 할당했을 때, total의 자동완성 메서드는 아무것도 뜨지 않으며 실수로 변수의 메서드에 오타를 내도 에러를 나타내지 않는다.

하지만 ts에서는 total을 number타입으로 인식하고 있으므로 관련 메서드가 자동으로 뜨게 된다. 또한 메서드에 오타를 내도 number타입의 변수에 관련해서는 그러한 메서드가 없다고 빨간줄 에러로 알려준다.