타입스크립트
타입스크립트는 마이크로소프트에서 개발하고 관리하는 오픈소스 프로그래밍 언어로 어떤 브라우저나 호스트, 운영체제에서도 동작합니다.
타입스크립트는 ECMA 스크립트를 따르기 때문에 자바스크립트의 특성을 침범하지 않고 최신 ECMA 표준을 지원합니다.
타입스크립트가 ECMA스크립트를 따르므로 자바스크립트 문법을 타입스크립트에서 이용할 수 있으며,
ECMA스크립트의 최신 표준을 지원함으로써 하위 ECMA 표준에 대한 컴파일도 지원합니다.
타입스크립트를 자바스크립트의 상위 집합(superset) 언어라고 합니다.
또한, 자바스크립트 보완해 변수나 함수 등에 명시적으로 타입을 추가할 수 있게 해 타입 안전성을 높였습니다. 모듈화 기능, 객체지향 프로그래밍 지원, 도구 지원도 좋습니다.
타입스크립트 특징
-
정적 타입 언어(static type language) : 컴파일 타임에 타입을 검사하는 데 시간이 들지만 안전성을 보장합니다.
-
동적 언어(dynamic language) : 컴파일 하는 데 시간이 들지 않고 동적 타이핑(dynamic typing)을 수행하기 때문에 런타임 시 속도가 빠릅니다.
여기서 정적 언어는 타입스크립트를 말하고, 동적 언어는 자바스크립트를 말합니다.
타입스크립트는 대규모 애플리케이션을 보다 쉽게 개발하기 위해 필요한 특징과 자바스크립트의 결점을 보완할 타입과 같은 특징을 포함합니다. 그 조건을 생각해보면 대략 다음과 같습니다.
-
모듈화 기능을 통해 모듈 간의 결합도(coupling)을 줄일 수 있어야 한다.
-
객체지향 프로그래밍을 지원해 코드의 중복과 복잡도를 낮출 수 있어야 한다.
-
코드 규모가 커지더라도 구조화를 갖춰 개발할 수 있어야 한다.
이러한 점에서 타입스크립트는 1) 모듈 시스템(ES6 모듈과 네임스페이스 지원), 2) 클래스와 인터페이스 지원, 3) 타입 시스템 지원 같은 특징을 지원합니다,.
-
ES6 모듈은 기존 ES5에서 어려웠던 모듈 분할과 결합 기능을 향상시켰습니다.
-
네임스페이스는 분리된 이름 공간을 제공해 복잡도를 낮추는 ES6에 없는 타입스크립트에 추가된 특징입니다.
1) 모듈 시스템 - ES6 모듈과 네임스페이스 지원
ES6에서 제공하는 모듈 선언과 모듈 호출 방식을 지원합니다. export 키워드로 외부 모듈을 선언하거나 import 키워드를 이용해 외부 모듈을 임포트 할 수 있습니다.
네임스페이스는 라이브러리 단위의 모듈 구성에 유리하며 규모 있는 모듈 구성에 필요한 특징입니다. 전역 이름 공간(global namespace)와 구분된 별도의 이름 영역을 가지므로 전역 이름 공간의 오염을 막습니다.
2) 클래스와 인터페이스 지원
타입스크립트도 자바나 C# 같은 전통적인 객체지향 프로그래밍 언어와 비슷한 방식으로 프로그래밍할 수 있습니다.
-
타입스크립트는 ES6에 없는 인터페이스 선언과 인터페이스 구현을 지원한다.
-
자바는 다중 생성자를 선언할 수 있지만, 타입스크립트는 단일 생성자만 선언할 수 있다.
-
타입스크립트는 자바와 달리 디폴트 초기화 매개변수와 선택 매개변수를 선언할 수 있다.
3) 타입 시스템 지원
타입 시스템은 자바스크립트의 타입을 확장하고 타입 어노테이션(type annotation)을 이용해 변수에 타입을 선언할 수 있게 합니다.
변수에 타입을 선언하는 것을 타입 지정(typing)이라 합니다. 타입 지정이 이뤄지면 변수는 엄격한 타이핑(string typing)이 적용돼 타입 안전성(type safety)을 확보합니다.
var myVar:string
변수나 함수의 매개변수 등에 선언한 타입 어노테이션은 컴파일할 때 타입 검사를 위한 목적으로 사용합니다.
타입 검사를 통해 안전성이 확보되면 타입스크립트 컴파일러가 타입 어노테이션을 제거하고 최종적으로 자바스크립트 코드를 생성합니다.
'let myVar:string' --> '타입스크립트 컴파일러' --> 'var myVar'
- 개발 과정에서 변수에 타입을 선언했으면 컴파일러가 타입에 에러가 있는지 타입의 유효성을 실시간으로 검사합니다.
- 타입에 이상이 없다면 tsc 명령어를 이용해 타입스크립트 컴파일러를 실행합니다.
- 그러면 타입 검사를 비롯해 문법을 검사한 다음에 이상이 없다면 대상(target)이 되는 자바스크립트 코드로 변환합니다.타입스크립트는 타입 검사를 컴파일 단계에서 수행하도록 하고 런타임에는 실행에만 집중해 최고의 성능을 낼 수 있게 합니다.
타입스크립트의 아키텍처
npm install --save @types/lodash
타입스크립트 2.x부터는 이러한 복잡한 절차를 거치지 않고, 위의 명령어 하나로 처리하므로 서드파티 라이브러리를 더욱 손쉽게 이용할 수 있게 됐습니다.
4) 에디터
3) 독립 서버(tsserver)
2) 언어 서비스 + 독립 TS 컴파일러(tsc)
1) 코어 타입스크립트 컴파일러1) 컴파일러
언어 변환 기능을 수행하는 코어 타입스크립트 컴파일러를 기반으로 합니다. 코어 타입스크립트 컴파일러는 파서, 바인더, 타입 체커, 에미터, 전처리기로 구성돼 있습니다.
-
파서(parser) : 읽어 들인 소스코드를 해석해 구문 트리를 만들고, 구문 트리를 다시 해석해 추상 구문 트리(AST:Abstract Syntax Tree)를 생성한다. 이때 추상 구문 트리는 구문 분석으로 생성된 파스 트리에서 불필요한 중복 내용을 제거한 트리이다.
-
바인더(binder) : 인터페이스나 모듈, 혹은 함수와 같은 모듈에 선언이 있을 때 이러한 선언을 심벌(symbol)로 보고 심벌 간의 규칙을 정의한다. 타입 시스템은 바인터를 통해 명명된 선언을 추론할 수 있게 된다.
-
타입 체커(type checker): 타입이 선언된 구문을 분석하고 타입이 적절한지 체크한다.
-
에미터(emitter) : 입력된 *.ts 같은 타입스크립트 파일을 *.js, *.d.ts, *.js.map 유형의 파일로 생성하는 기능을 수행한다.
-
전처리기(pre-processor) : 타입스크립트 파일에 선언된 import 문이나 ”///<reference path = 경로/” 같은 외부 호출 선언이 있을 때 참조할 수 있는 파일을 가져와 정렬된 파일 목록을 생성한다. 파일 목록을 만들 때는 .d.ts 보다는 .ts 파일을 우선으로 호출해 가져온다. 이때 앰비언트 모듈이 이미 선언돼 있다면 모듈을 가져오지 못하더라도 에러를 발생시키지 않는다. 결국, 컴파일러는 전처리기로부터 생성된 파일 목록을 이용해 파일을 호출하고 컴파일을 수행한다.
2) 언어 서비스
언어 서비스는 코드를 컴파일해 도움말이나 코드의 포매팅, 코드 색상 지정 같은 편집기에 필요한 기능을 제공합니다. 에디터에서 코드 어시스트를 제공하는 근간입니다.
3) 독립 서버 (tsserver)
독립 서버(standalone server)는 컴파일러와 언어 서비스 같은 하위 레이어를 래핑해 JSON 형식을 통해 외부에 정보를 노출할 수 있게 합니다.
tsserver는 IDE나 편집기 개발에 필요한 기능을 명령어 형식으로 제공하며, tsserver 형식에 맞게 JSON으로 명령을 요청하면 결과를 응답합니다.
4) 에디터(편집기)
편집기는 독립 서버를 비롯해 하위 레이어의 요소를 모두 고려해 동작하는 최종 응용 단계의 애플리케이션입니다. 비주얼 스튜디오 코드, IDE 등
타입스크립트 컴파일러
최신 ECMA스크립트의 특징을 사용하면서 동작 시점에는 ES5로 변환할 수 있는 도구를 tsc라고 하는 타입스크립트 컴파일러(typescript compiler)라 합니다.
tsc는 타입스크립트를 입력으로 받아 ECMA스크립트의 표준 언어로 변환할 수 있으므로 트랜스파일러(transpiler)라고 합니다.
-
컴파일링: 한 언어의 소스코드를 다른 언어로 바꾸는 것
-
트랜스파일링: 한 언어의 소스코드를 비슷한 추상화 수준의 다른 언어로 바꾸는 것
참고
- 타입스크립트 퀵스타트 (정진욱 지음)
