[TypeScript] 타입스크립트란?

타입스크립트란?

 

타입스크립트

타입스크립트는 마이크로소프트에서 구현한 JavaScript의 슈퍼셋 프로그래밍 언어로 정적 타입을 명시 할 수 있다는게 순수 자바스크립트랑 가장 큰 차이점이다. 따라서 개발자가 의도한 변수나 함수 등의 목적을 더욱 명확하게 전달할 수 있으며 잘못된 변수나 함수 사용에 대한 에러 알림 같은 풍부한 피드백을 받을 수 있다. 실제로 타입스크립트를 사용하면 순수 자바스크립트로 코드를 작성했을 때 나오는 에러를 상당 부분 사전에 잡아낼 수 있다.

 

 

 

확장자로는 .ts를 사용하며 결국에는 컴파일 결과물로 자바스크립트 코드를 출력해 구동시키기 때문에 기존 자바스크립트랑도 호환이 가능하다는 장점이 있다.  또 '*.d.ts' 파일을 사용하여 기존 자바스크립트 소스를 일절 건드리지 않고 자바스크립트 객체를 타입스크립트로 정의가 가능하다. 또 타입스크립트는 ES6에서 새롭게 사용된 문법을 포함하고 있으며 클래스, 인터페이스, 상속, 모듈 등과 같은 객체 지향 프로그래밍 패턴을 제공한다.

 

 

타입스크립트 동작 과정

1. 개발자가 '타입스크립트 코드'로 작성을 한다
2. 작성한 타입스크립트 코드는 '타입스크립트 컴파일러(tsc)'를 통해 파싱하여 '타입스크립트 AST 코드'로 변환된다.
3. '타입 검사기(Typechecker)'를 통하여 파싱 된 '타입스크립트 AST 코드'의 타입을 체크한다.
4. 타입스크립트 AST의 코드를 '자바스크립트 코드'로 변환한다.
-- 해당 과정까지는 '타입스크립트 컴파일러(tsc)'에 의해 수행이 된다.
5. 자바스크립트 코드를 '자바스크립트 AST 코드'로 파싱한다.
6. 자바스크립트 AST를 '바이트 코드'로 변환된다.
7. 런타임(runtime)이라는 실행환경에서 바이트 코드를 실행한다.
-- 해당 과정까지는 '자바스크립트 런타임(js 엔진, node.js)'에 의해 수행이 된다.
[ 요약 ]
=> 자바스크립트 코드 -> (타입스크립트 컴파일러로 파싱) -> 타입스크립트 AST 코드 -> (타입 검사기로 체크) -> 자바스크립트 코드 -> (파싱) -> 자바스크립트 AST 코드 -> 바이트 코드 -> (런타임) -> 코드 실행

 

 

 

기존 자바스크립트는 컴파일 하는 과정이 없어서 코드에 문제가 있어도 실행을 하게 되고 에러를 실행 후에나 알 수 있게 된다. 하지만 타입스크립트는 미리 코드 작성 과정에서 에러를 잡아낼 수 있는 장점이 있다.(실제로 써보면 매우 훌륭하다.) 

 

 

타입스크립트의 사용을 고려하는 이유

 

-높은 수준의 코드 탐색과 디버깅

타입스크립트는 코드에 목적을 명시하고 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거한다. 또한 코드 자동완성이나 실행 전 피드백을 제공하여 작업과 동시에 디버깅이 가능해 생산성을 높일 수 있다. 실제로 한 연구에 따르면 모든 자바스크립트 버그의 15%가 사전에 타입스크립트로 감지 할 수 있다고 한다.

 

-자바스크립트 호환

타입스크립트는 자바스크립트와 100% 호환된다. 따라서 프론트엔드 또는 백엔드 어디든 자바스크립트를 사용할 수 있는 곳이라면 타입스크립트도 쓸 수 있다. 타입스크립트는 앱과 웹을 구현하는 자바스크립트와 동일한 용도로 사용 가능하며 서버 단에서 개발이 이루어지는 복잡한 대형프로젝트에서도 두각을 드러낸다.

 

-강력한 생태계

타입스크립트는 그리 오래되지 않은 언어임에도 불구하고 강력한 생태계를 가지고 있다. 대부분의 라이브러리들이 타입스크립트를 지원하며 Microsoft의 VScode를 비롯해 각정 에디터가 타입스크립트 관련 기능과 플러그인을 지원한다.