[TypeScript] - tsconfig.json 분석

 

-타입스크립트 프로젝트는 타입스크립트 컴파일러의 설정 파일인 tsconfig.json파일이 있어야  다음과 같은 명령어로 tsconfig.json을 만들 수 있다.

 

ts --init

 

- 위 명령어로 만들어진  tsconfig.json을 보면 실제 개발을 진행하는데 필요한 많은 옵션이 들어있다 

- 보통은 프로젝트에 필요한 옵션만 설정해서 간략하게 한다.

 

 

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

 

tsconfig.json 살펴보기 

 

1 ) module

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

 

-자바스크립트 모듈은 웹 브라우저에서는 AMD 방식으로 동작한다 

-자바스크립트 모듈은 Node.js 에서는 CommonJs 방식으로 동작한다.

- 따라서 tsconfig.json 파일에서 compiler Options 항목의 module 키는 동작 대상 플랫폼이 웹 브라우저인지 Node.js 인지 구분해 그에 맞는 모듈 방식으로 컴파일 하려는 목적으로 설정한다.

 

 

2) moduleResolution

- module키 값이 common.js 이면 Node.js에서 동작하는 것을 의미하므로 moduleResolution 키 값은 항상 node로 설정한다

- 반면에 amd이면 moduleResolution 키 값은 classic으로 설정한다.

 

3) target 

- target 키에는 트랜스파일할 대상 자바스크립트 버전을 설치한다 대부분 'es5

를 키 값으로 설정한다.

 

4)  baseUrl과 outDir

- baseUrl과 outDir 키에는 트랜스파일된 ES5 자바스크립트 파일을 저장하는 디렉터리를 설정한다

- tsc는 tsconfig.json 파일이 있는 디렉터리에서 실행된다 따라서 현재 디렉터리를 의미하는 "./

로 baseUrl 키 값을 설정하는 것이 보통이다.

-  outDir은  baseUrl 설정 값을 기준으로 했을 때 하위 디렉터리의 이름이다 dist라는 값을 주면 빌드된 결과가 dist 디렉터리에 만들어진다.

 

4)  paths

- paths는 소스 파일의 import  문에서 from 부분을 해석할 때 찾아야 하는 디렉터리를 설정한다

- import 문이 찾아야 하는 소스가 외부 패키지이면 node_modules 디렉터리에서 찾아야 하므로 키 값에 node_modules/*도 포함한다.

 

5)  esModuleInterop

-  오픈 소스 자바스크립트 라이브러리 중에는 '웹 브라우저에서 동작한다는 것을 가정으로 만들어진 것이다 이들은 commonJs 방식으로 동작하는 타입스크립트 코드에 혼란을 줄 수 있다.

 

-예를 들면 chance 가 바로 AMD 방식을 전제로 해서 구현된 라이브러리이다 

- chance 패키지가 동작하려면 esModuleInterop 키 값을 반드시 true로 해주어야 한다

 

5)  sourceMap

 

- sourceMap 키 값이 true이면 트랜스파일 디렉터리에는 .js 파일 이외에도 js.map파일이 만들어진다

- sourceMap 파일은 변화된 자바스크립트 코드가 타입스크립트 코드의 어디에 해당하는 지를 알려준다

- sourceMap 파일은 주로 디버깅 할때 사용한다

 

6)  downleveliteration

 

- 생성기 구문이 정상적으로 동작하면 downleveliteration 키 값을 반드시  true로 한다 

7)  nolmplicitAny

 

-  타입스크립트 컴파일러는 기본적으로 f(a, b) 처럼 매개변수 a, b 에 타입을 명시하지 않은 코드일 경우

f(a: any, b: any)처럼 암시적으로 any타이블 설정한 것으로 간주한다.

 

- 이런 형태의 코드는 타입스크립트 언어의 장점을 사용하는 것이 아니므로 'a' 매개변수에는 암식으로 'any'형식이 포함됩니다 라는 오류가 발생한다 

 

- 이 오류는 타입스크립트를 처음 배우는 사람을 혼란스럽게 하므로 우선 nolmplicitAny 키를 설정한다.

 

-false로 설정할 경우 타입을 지정하지 않더라도 문제로 인식하지 않는다 문제로 인식하기 위해서는 키 값을 'true'로 바꾸면 된다.