Typescript를 사용하는 이유

실전프로젝트에서 기존에 사용해왔던 자바스크립트 대신 타입스크립트를 쓰자고 얘기가 나왔다. 그래서 왜 사용해야 하는지, 사용하면 어떤 장점이 있는지 알아보고자 했다.

Typescript는 정적 언어

기존의 자바스크립트는 각 변수마다 그 변수의 타입(number나 string)을 지정해 주지 않아도 사용이 가능했다. 하지만 이렇게 사용할 경우, 작성한 코드가 많거나, 규모가 큰 프로젝트에서는 컴파일 단계에서는 문제가 없지만 실행하고 나서 오류가 나는 경우가 종종 있었다. 타입스크립트는 이러한 오류들을 컴파일 전 단계에서 잡아주어서 개발에 도움을 준다.

// 자바스크립트 
// a+b를 해도 자바스크립트에서는 오류가 나지 않는다
function sum(a, b) {
  return a + b;
}

sum('x', 'y'); // 'xy'

// typescript
// 타입스크립트에서는 이렇게 명시적으로 타입을 지정해주어야 한다.
function sum(a: number, b: number) {
  return a + b;
}

sum('x', 'y');
// error TS2345: Argument of type '"x"' is not assignable to parameter of type 'number'.

이렇게 코드 작성 단계에서부터 에러를 알려줘서 디버깅이 쉬워지고, 코드의 가독성을 높일 수 있다.

크로스 브라우징(브라우저 호환성) 지원

모든 브라우저의 지원을 걱정해야하는 프론트개발자 입장에서는 ES6+을 써도 될지 고민이 많다고 한다. 하지만 타입스크립트는 컴파일 과정에서 ES6+ 문법들을 ES5(또는 ES3)로 바꿔주기 때문에 Babel의 도움 없이 크로스브라우징 문제를 해결할 수 있다.

코드 자동완성과 가이드

프론트엔드 개발에 자주 사용되는 툴인 Visual Studio Code가 타입스크립트로 이루어져 있어서 타입스크립트 개발에 최적화 되어있다.
변수 total에 대한 타입이 지정되어 있기 때문에 VSCode에서 해당 타입에 대한 API를 미리 보기로 띄워줄 수 있고 따라서, API를 다 일일이 치는 것이 아니라 tab으로 빠르고 정확하게 작성해나갈 수 있다.

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