tsconfig.json 파일 살펴보기

{

 "compilerOptions" { ...   ... },

 "include" : ["src/**/*"]

}

 

compilerOptions 항목은 tsc 명령 형식에서 옵션을 나타내고, include 항목은 대상 파일 목록을 나타냅니다.

include 항목에서 src/**/*은 src 디렉터리는 물론 src의 하위 디렉터리에 있는 모든 파일을 컴파일 대상으로 포함한다는 의미입니다.

 

{

 "compilerOptions" { 

  "module": "commonjs",

  "esModuleInterop": true,

  "target": "es5",

  "moduleResolution": "node",

  "outDir": "dist",

  "baseURL": ".",

  "sourceMap": true,

  "downlevelIteration": true,

  "noImplicitAny": false,

  "paths": { "*": ["node_modules/*"] }

  },

 "include" : ["src/**/*"]

}

 

module 키

타입스크립트 소스코드가 컴파일되어 만들어진 ES5 자바스크립트 코드는 웹 브라우저와 노드제이에스 양쪽에서 모두 동작해야 합니다. 그런데 웹 브라우저와 노드제이에스는 물리적으로 동작하는 방식이 달라서 여러개의 파일로 분할된 자바스크립 코드 또한 웹 브라우저와 노드제이에스 양쪽에서 각각 다르게 동작합니다.

자바스크립트 모듈은 웹 브라우저에서는 AMD 방식으로 동작하고, 노드제이에서는 웹 브라우저가 아닌 환경에서는 CommonJS 방식으로 동작합니다.

tsconfing.js 파일에서 compilerOptions 항목의 module 키는 동작 대상 플랫폼이 웹 브라우저 인지 노드제이에서인지를 구분해 그에 맞는 모듈 방식으로 컴파일하려는 목적으로 설정합니다. 플랫폼에 따라 다음과 같은 값을 설정 할 수 있습니다.

- 웹브라우저에서 동작: amd

- 노드제이에서에서 동작 : commonjs

 

moduleResolution 키

module 키의 값이 commonjs이면 노드제이에스에서 동작하는 것을 의미하므로, moduleResolution 키값은 항상 node로 설정합니다. 반면에 module 키 값이 amd 이면 moduleResolution 키값을 classic으로 설정 합니다.

 

target 키

target 키에는 트랜스파일할 대상 자바스크립트의 버전을 설정합니다. 대부분 es5를 키값으로 설정합니다. 만일, 최신 버전의 노드제이에스를 사용한다면 es6을 설정합니다.

 

baseUrl과 outDir 키

baseUrl과 outDir 키에는 트랜스파일된 ES5 자바스크립트 파일을 저장하는 디렉터리를 설정 합니다. tsc는 tsconfig.json 파일이 있는 디렉터리에서 실행 됩니다. 따라서 현재 디렉터리를 의미하는 "."로 baseUrl 키값을 설정하는 것이 보통입니다. outDir 키는 baseUrl 설정값을 기준으로 했을 때 하위 디렉터리의 이름입니다. 앞서 이키는 dist라는 값을 설정했으므로 빌드된 결과가 dist 디렉터리에 만들어집니다.

 

paths 키

paths 키에는 소스 파일의 import 문에서 from 부분을 해석할 때 찾아야 하는 디렉터리를 설정 합니다. import 문이 찾아야 하는 소스가 외부 패키지이면 node_modules 디렉터리에서 찾아야 하므로 키값에 node_modules/*도 포함했습니다.

 

esModuleInterop 키

오픈 소스 자바스크립트 라이브러리 중에는 웹 브라우저에서 동작한다는 가정으로 만들어진 것이 있는데, 이들은 CommonJS 방식으로 동작하는 타입스크립트 코드에 혼란을 줄 수 있습니다. 02-2절에서 사용해 본 chance가 바로 AMD 방식을 전제로 해서 구현된 라이브러리입니다. 따라서 chance 패키지가 동작하려면 esModuleInterop 키값을 반드시 true로 설정해야 합니다.

 

sourceMap 키

sourceMap 키값이 true이면 트랜스파일 디렉터리에는 .js 파일 이에외도 .js.map 파일이 만들어집니다. 이 소스맵 파일은 변환된 자바스크립트 코드가 타입스크립트 코드의 어디에 해당하는지를 알려줍니다. 소스맵 파일은 주로 디버깅 할 때 사용됩니다.

 

downleleIteration 키

생성기 구문이 정상적으로 동작하려면 downleleIteration 키값을 반드시 true로 설정해야 합니다.

 

nolmplicitAny 키

타입스크립트 컴파일러는 기본적으로 f(a, b)처럼 매개변수 a, b에 타입을 명시하지 않은 코드일 경우 f(a: any, b: any)처럼 암시작으로 any 타입을 설정한 것으로 간주합니다. 이런 형태의 코드는 타입스크립트 언어의 장점을 사용하는 것이 아니므로 코드에 문제가 있음을 알려 줍니다.

그런데 이 오류는 타입스크립트를 처음 배우는 사람을 매우 혼란스럽게 합니다. 오류 메시지의 의미가 직관적이지 않기 때문입니다. 따라서 혼란을 줄이고자 noImplicitany 키값을 false로 설정 합니다.이렇게 하면 타입을 지정하지 않더라도 문제로 인식하지 않습니다.