TypeScript란?

스타트업 기업들의 채용정보를 살펴보다 보면 상당수의 기업이 TypeScript를 원하거나 우대하는 것을 확인 할 수 있습니다.

이번 포스팅에서는 타입스크립트란 무엇인지 또 타입스크립트가 왜 중요한지 알아보겠습니다.
​
​

What is TypeScript?

​

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

​

• TypeScript는 MS에 의해 개발/관리되고 있는 오픈소스 프로그래밍 언어입니다.
• 대규모 애플리케이션을 개발하는 데 자바스크립트가 어렵고 불편하다는 불만에 대응하기 위해 개발되었습니다.
• TypeScript는 ES5의 Superset이므로 기존의 자바스크립트(ES5) 문법을 그대로 사용할 수 있습니다.
• ES6의 새로운 기능들을 사용하기 위해 Babel과 같은 별도 트랜스파일러(Transpiler)를 사용하지 않아도 ES6의 새로운 기능을 기존의 자바스크립트 엔진(현재의 브라우저 또는 Node.js)에서 실행할 수 있습니다.

TypeScript의 장점

TypeScript를 사용하는 가장 큰 이유 중 하나는 정적 타입을 지원한다는 것입니다.

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

위 함수를 정의한 개발자의 의도는 아마도 2개의 숫자 타입 인수를 전달받아 그 합계를 반환하려는 것으로 추측할 수 있습니다. 하지만 코드상으로는 어떤 타입의 인수를 전달하여야 하는지, 어떤 타입의 반환값을 리턴해야 하는지 명확하지 않죠? 따라서 위 함수는 아래와 같이 호출될 수 있습니다.

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

sum(10, 20); // 30

이렇게 sum 함수를 이용하여 숫자 10과 20을 더합니다. 그러면 원하는 결과인 30을 얻을 수 있습니다. 그런데 만약 아래와 같이 함수를 호출하면 어떻게 될까요?

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

위 코드는 자바스크립트 문법상 어떠한 문제도 없으므로 자바스크립트 엔진은 아무런 이의 제기없이 위 코드를 실행할 것입니다.
이러한 상황이 발생한 이유는 변수나 반환값의 타입을 사전에 지정하지 않는 자바스크립트의 동적 타이핑(Dynamic Typing)에 의한 것입니다.

위 함수를 TypeScript의 정적 타이핑(Static Typing)을 사용하여 다시 작성 해보겠습니다.

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

sum('10', '20');

error TS2345: Argument of type '"10"' is not assignable to parameter of type 'number'.

이처럼 TypeScript는 정적 타입을 지원하므로 컴파일 단계에서 오류를 포착할 수 있는 장점이 있습니다.

명시적인 정적 타입 지정은 개발자의 의도를 명확하게 코드로 기술할 수 있고 이는 코드의 가독성을 높이고 예측할 수 있게 하며 디버깅을 쉽게 합니다.

​

마치며...

TypeScript를 이용하면서 관련된 에러는 적어지고 대규모의 리펙토링을 하거나 새로운 담당자가 코드를 마주해도 개발과 유지보수를 용이하게 할 수 있다면 이 장점만으로도 TypeScript를 사용하기에 충분 한 이유 같습니다.

Typescript 도입으로 얻을 수 있는 장점들을 생각해본다면 상당히 매력적인 언어라 느껴져 열심히 공부해 볼 예정입니다.🥰

참고

참고 자료 1
참고 자료 2