[TypeScript] TypeScript란?

오늘은 TypeScript에 대해 알아보겠습니다.

 

 

[ TypeScript ] 

2012년 마이크로소프트가 발표한 타입스크립트(TypeScript)는 자바스크립트(JavaScript)를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어입니다. 요즘은 대형 SI 프로젝트에서 흔하게 사용되고 있으며 개발자 구인 시 우대사항 기술로도 자주 언급되고 있습니다.

 

또한, 타입스크립트는 클라이언트 사이드와 서버 사이드를 위한 개발에 사용할 수 있으며, 자바스크립트 엔진을 사용하면서 커다란 애플리케이션을 개발할 수도 있습니다.  타입스크립트에서 자신이 원하는 타입을 정의하고 프로그래밍하면 자바스크립트로 컴파일되어 실행할 수 있습니다. 

 

타입스크립트는  ES5의 Superset이므로 기존의 자바스크립트 (ES5) 문법을 그대로 사용할 수 있습니다. 또한 ES6의 새로운 기능을 기존의 자바스크립트 엔진(현재의 브라우저 또는 Node.js)에서 실행할 수 있습니다. 

 

 

타입스크립트는 모든 운영체제, 모든 브라우저, 모든 호스트에서 사용 가능한 오픈소스입니다. 

 

 

[ 설치 ]

 

npm install -g typescript

 

 

[ 사용 방법 ]

 

tsc 바꿀 파일 이름.ts

 

 

[ TypeScript의 장점 ]

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

 

※ 자바스크립트는 동적 타입의 인터프리터 언어로 런타임에서 오류를 발견할 수 있습니다. 이에 반해 타입스크립트는 정적 타입의 컴파일 언어이며 타입스크립트 컴파일러 또는 바벨(Babel)을 통해 자바스크립트 코드로 변환됩니다. 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고, 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다는 장점이 있습니다. 하지만 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점이 있습니다.

 

 

function add(num1, num2) {
    return num1 + num2;
}

 

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

 

따라서 위 함수는 아래와 같이 호출될 수 있습니다.

 

add(10, 20); // 30

 

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

 

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

 

위 코드는 자바스크립트 문법상 어떤 문제도 없으므로 자바스크립트 엔진은 오류 없이 위 코드를 실행할 것입니다.

 

이런 상황이 발생한 이유는 변수나 반환값의 타입을 사전에 지정하지 않는 자바스크립트의 동적 타이핑 (Dynamic Typing)에 의한 것입니다.

 

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

 

function add(num1: number, num2: number) {
  return num1 + num2;
}
 
 
 

 

add('10', '20');

 

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

 

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

 

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