[TypeScript] TypeScript 튜토리얼(1) - 컴파일하기

TypeScript란?

 

    TypeScript는 Microsoft에서 개발한 오픈소스 프로그래밍 언어입니다. Javascript의 상위 집합(superset)으로 ECMAScript의 최신 표준을 모두 지원하며 트랜스파일링되어 JavaScript 파일을 생성합니다. 느슨한 문법을 가지고 있는 JavaScript와 달리 정적 타입을 지원함으로써 개발자 간의 협업을 보다 용이하게 해주며, 디버깅에도 도움이 됩니다.

 

 

컴파일?

 

    ts 파일들은 그 자체로 구동되는 것이 아니라 해당 파일들로부터 트랜스파일링된 js 파일들이 구동되는 방식을 취하는데요, 바로 이 과정에서 엄격한 타입 검사를 거쳐 사전에 에러를 내주는 것이 TypeScript의 존재 의의라고 해도 과언이 아닐 것입니다. 그렇다면 이제 어떻게 ts 파일들을 컴파일해주는지 알아보도록 하겠습니다.

    먼저, TypeScript가 설치되어 있지 않다면 설치부터 해주어야겠죠? Windows를 쓰는 경우  npm install typescript -g 를, Mac을 쓰는 경우 앞에 sudo를 붙여 sudo npm install typescript -g를 통해 typescript를 설치해주세요!

 

typescript 설치 실행 화면. -g 는 전역으로 설치하는 것을 의미합니다.

 

설치도 했으니, 한 번 돌려봐야겠죠? 간단한 ts 코드를 작성 후, tsc 명령어를 통해 js 코드로 컴파일해주었습니다.

 

ts 파일 컴파일 명령어

ts 파일과 컴파일된 js 파일 비교

 

왼쪽의 ts 파일을 컴파일한 결과물이 오른쪽의 js 파일입니다. 딱 하나, 달라진 것을 찾을 수 있죠? let이 var로 바뀌어버렸다는 점인데요, 왜 이렇게 컴파일되는 걸까요? 바로 타겟 환경을 명시해주지 않았기 때문입니다. 별도로 명시해주지 않으면 tsc는 구형 브라우저도 지원할 수 있도록 JavaScript ES5 문법에 맞추어 컴파일해주는데요, 이를 방지하기 위해서는 옵션들을 컴파일 시에 명시해주면 됩니다. 

 

그럼 컴파일 옵션을 주어 컴파일한 후, 각각의 옵션들에 대해 설명드리겠습니다. 

 

tsc 컴파일 옵션 추가

ts 파일과 컴파일된 js 파일

 

• --lib: 어떤 라이브러리들이 포함되는지 명시해주는 옵션입니다. ES6 버전에서 추가된 문법인 Promise를 지원하기 위해서 ES6 라이브러리가 필요하며, console.log() 함수를 지원하기 위해 DOM 라이브러리가 필요합니다.
• --target: 어떤 JavaScript 환경을 타겟으로 할 것인지 명시해주는 옵션입니다. ES6 버전을 타겟으로 한다고 명시해놓았으므로 ES6 버전에서 지원되는 import는 원래대로라면 require로 바뀔 필요 없이 그대로 유지되었을 것입니다. 그렇지만 이후의 module 옵션 덕분에 import가 require로 번역되었습니다.
• --module: 모듈화에 있어서 어떤 표준을 따를 것인지 명시해주는 옵션입니다. 쉽게 말씀드리자면, 해당 JavaScript 코드가 웹 브라우저 환경에서 돌아가는 코드라면 amd를, Node.js 런타임에서 돌아가는 코드라면 commonjs를 명시해주시면 될 것입니다. 현재까지 Node.js 환경에서 import를 지원하지 않고 있으니까요. 저는 Node.js 환경에서 코드를 돌리고자 하기에 commonjs 옵션을 주었습니다.

 

이렇게 간단하게 컴파일 방법과 컴파일 옵션에 대해 알아보았는데요, 그러면 ts 파일들을 컴파일할 때마다 옵션들을 외우고, 그에 따라 명령어를 입력해야 하는 걸까요? 당연히 아닙니다! tsc는 프로젝트 루트 디렉토리에 위치한 tsconfig.json 파일을 통해 컴파일 환경을 세팅할 수 있게 하고 있습니다.

 

tsconfig.json

 

• include: tsc가 컴파일할 input 파일들을 명시합니다. tsconfig.json 파일을 root directory로 하는 상대경로들을 array로 나타내는 형식입니다. 해당 input 파일들이 import하는 파일들 역시 컴파일 대상입니다.
• exclude: include에 포함된 input 파일들 중 컴파일하지 않을 파일들을 명시합니다. node_modules는 소스코드에서 import되는 경우가 많아 명시했습니다만, 사실 굳이 명시하지 않아도 default 값으로 ["node_modules", "bower_components", "jspm_packages"] 와 아래에서 설명할 <outDir>를 포함하고 있습니다.
• rootDir: default 값으로 input 파일들이 모두 포함된 가장 긴 디렉토리를 가집니다. 쉽게 말해 ./src/input에 모든 input 파일이 들어있을 때 rootDir의 default 값은 ./src가 아니라 ./src/input란 말이지요. 
• outDir: 컴파일된 파일들을 저장하는 디렉토리입니다. rootDir을 어떻게 지정하냐에 따라 구조가 달라지는데, 만약 위의 예시에서 rootDir을 ./src로 설정했다면 js 파일들은 <outDir>/input/ 에 저장될 것이며, ./src/input 으로 설정할 경우 <outDir>/ 에 저장될 것입니다. 
• removeComments: 컴파일 시에 주석을 제거하는 옵션입니다.
• noImplicitAny: 가장 중요한 옵션입니다. 이름 그래도 암묵적인 Any 타입을 허용하지 않음으로써 나도 모르게 넘어갈 수 있는 느슨한 타입 선언을 바로잡을 수 있게 해줍니다.

 

위와 같이 tsconfig.json을 설정해주면 프로젝트의 루트 디렉토리에서 tsc만 입력해주어도 원하는 대로 다음과 같이 컴파일을 수행할 수 있습니다.

 

컴파일 명령

결과

 

그럼 오늘은 간단한 컴파일에 대해 알아보았으니 다음에는 TypeScript의 존재의미와도 같은 타입 선언 에 대해 알아보도록 하겠습니다! 혹시 컴파일 옵션들에 대해 더 궁금하신 분들은 공식 문서에 잘 정리되어 있으니 참고해주세요:)