정의
JavaScript를 기반으로 하는 강력한 타입형 프로그래밍 언어
탄생 배경
JavaScript로 작성된 프로그램의 크기, 범위 및 복잡성은 기하급수적으로 커졌지만, 다른 코드 단위 간의 관계를 표현하는 JavaScript 언어의 능력은 그렇지 못했습니다. JavaScript의 다소 특이한 런타임 의미 체계(runtime semantics)와 더불어, 언어와 프로그램 복잡성 간의 불일치는 JavaScript 개발을 규모에 맞게 관리하기 어려운 작업으로 만들었습니다. 이러한 문제를 해결하기 위해 MS(마이크로소프트)에서 TypeScript를 개발했습니다.
특징
- 자바스크립트로 트랜스 파일 해야 브라우저나 자바스크립트 엔진에서 실행됩니다.
- 자바스크립트의 상위 집합으로 모든 ECMA 버전의 자바스크립트 파일을 사용할 수 있습니다.
- 타입 시스템을 지원합니다. 타입 시스템은 자바스크립트의 타입을 확장하고 타입 어노테이션을 이용해 변수에 타입을 선언할 수 있게 합니다. 이렇게 타입이 지정되면 변수는 엄격한 타이핑이 적용돼 타입 안정성을 확보할 수 있습니다.
- 모든 운영 체제, 모든 브라우저, 모든 호스트에서 사용 가능한 오픈 소스입니다.
내부 아키텍처
타입 스크립트의 아키텍처 중 언어 변환 기능은 코어 타입 스크립트 컴파일러에서 수행합니다.
- 파서(parser) : 읽어 들인 소스 코드를 해석해 구문 트리를 만들고, 구문 트리를 다시 해석해 추상 구문 트리를 생성합니다.
- 바인더(binder) : 인터페이스나 모듈, 혹은 함수와 같은 모듈에 선언이 있을 때 이러한 선언을 심벌(Symbol)로 보고 심벌 간의 규칙을 정의한다.
- 타입 해석기/검사기(Type resolver/ Checker): 타입이 선언된 구문을 분석하고 타입이 적절한지 체크한다.
- 에미터(emitter) : 입력된 *.ts 같은 타입 스크립트 파일을 *. js, *. d.ts, *. js.map 유형의 파일로 생성하는 기능을 수행한다.
- 전처리기(pre-processor) : 타입스크립트 파일에 선언된 import 문이나 외부 호출 선언이 있을 때 참조할 수 있는 파일을 가져와 정렬된 파일 목록을 생성한다. 파일 목록을 만들 때는. d.ts 보다는. ts 파일을 우선적으로 호출해 가져온다. 결국 컴파일러는 전처리기로부터 생성된 파일 목록을 이용해 파일을 호출하고 컴파일을 수행한다.
- 독립형 컴파일러(Standalone compiler) : 일괄 컴파일 CLI입니다. 주로 지원되는 다양한 엔진(예: Node.js)에 대한 파일 읽기 및 쓰기를 처리합니다.
- 언어 서비스(Language Service) : 핵심 컴파일러 파이프라인 주위에 편집기 같은 애플리케이션에 가장 적합한 추가 계층을 노출합니다. 언어 서비스는 구문 완성, 서명 도움말, 코드 서식 및 개요, 색상 지정 등과 같은 일반적인 편집기 작업의 공통집합을 지원합니다.
- Standalone Server (tsserver) : 컴파일러 및 서비스 계층을 감싸고 JSON 프로토콜을 통해 노출시킵니다.
컴파일 과정
TypeScript 컴파일러는 소스 코드를 JavaScript 파일로 변환합니다. 아래는 프로세스의 개요입니다.
- TypeScript 스캐너는 소스 코드를 스캔하여 토큰 스트림으로 바꿉니다.
- 파서는 토큰 스트림을 구문 분석하여 AST(추상 구문 트리) 를 얻습니다.
- Binder는 AST를 가로질러 일련의 Symbol을 생성하고 Symbol을 해당 노드에 연결합니다.
- 검사기는 유형 검사를 수행합니다. 이 단계는 대부분의 시간이 걸립니다.
- 이미터는 최종 출력인 AST를 기반으로 하는 JavaScript 파일을 생성합니다.
마무리
오늘은 요새 많은 스타트업 회사에서 사용 중인 TypeScript에 대해서 공부해봤습니다.
공부를 해보니 왜 많은 기업들이 JavaScript에서 TypeScript로 전환하려고 하는지 이해가 갔습니다. 하지만 모든 상황에서 과연 타입 스크립트가 만능일까?라는 생각도 듭니다. 만약 도입 검토를 고려하신다면 성능 테스트를 진행해보시는 게 좋을 거 같습니다.
아직 부족하거나 틀린 부분이 있을 수도 있으니 주의하시면 좋을 거 같습니다.
이번 포스팅은 마무리하면서 다음 포스팅에서 뵙겠습니다.
참고
https://www.typescriptlang.org/docs/handbook/intro.html
https://github.com/microsoft/TypeScript/wiki/Architectural-Overview
https://typescript-kr.github.io/pages/tutorials/ts-for-the-new-programmer.html
https://levelup.gitconnected.com/typescript-compiler-and-compiler-api-part-1-4bb0d24a565e