왜 TypeScript(타입스크립트)를 사용할까?

타입스크립트 란?

타입스크립트는 자바스크립트에 타입을 부여한 언어로 자바스크립트에서 확장된 언어라고 볼 수 있다. 타입스크립트는 브라우저에서 실행하려면 자바스크립트 파일로 변환이 필요하며 이러한 과정을 컴파일이라고 부른다.

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

타입스크립트는 코드 품질 및 가독성이 높아지고 에러를 사전에 방지할 수 있다.

에러 사전 방지

// sum.js
function sum(a, b) {
	return a + b;
}

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

두 숫자의 합을 구하는 함수 코드이다. sum(10, 20)를 호출하면 원하는 결과인 30을 얻을 수 있다. 하지만 sum('10', '20')를 호출하면 문자열을 더한 1020이라는 결과가 나타난다.

두 숫자의 합을 구하려는 의도로 함수를 호출했지만 sum('10', '20') 우리의 의도와 다르게 문자열을 더하는 기능을 수행했기 때문에 의도하지 않은 코드가 동작한 것이다.

// sum.ts
function sum(a:number, b: number):number {
	return a + b;
}

sum(10, 20);     // 30
sum('10', '20'); // Error: '10'은 number에 할당될 수 없습니다.

타입스크립트를 사용하면 의도하지 않은 코드의 동작을 예방할 수 있다.

코드 자동 완성 기능 제공

타입스크립트의 또 다른 장점으로는 코드 작성 시 코드 자동 완성 기능을 제공해준다. 따라서 개발 생산성을 높일 수 있다.

// sum.ts
function sum(a, b) {
	return a + b;
}

var total = sum(10, 20);
total.toLocaleString();

위 코드는 sum(10, 20) 함수를 호출해서 두 숫자의 합을 구한 다음에 toLocaleString()를 적용한 코드이다. total 이라는 변수의 타입이 코드를 작성하는 시점에 number라는 것은 자바스크립트가 인지하지 못한다. 따라서 자동 완성 기능이 제공되지 않기때문에 개발자가 스스로 toLocaleString()를 입력해야 한다.

// sum.ts
function sum(a: number, b: number): number {
  return a + b;
}
var total = sum(10, 20);
total.toLocaleString();

먄약 타입스크립트로 작성되었다면 total에 타입이 지정되어 있기 때문에 아래와 같이 API를 미리 볼 수 있고 API를 일일이 다 작성하는 것이 아니라 tab으로 빠르고 정확하게 작성해 나갈 수 있기 때문에 생산성이 상당히 높아진다.

참고 : 타입스크립트 핸드북(Why Typescript?)