[Typescript] tsconfig.json 구성요소

//tsconfig.json
{
    "compilerOptions": {
        "module": "commonjs",
        "esModuleInterop": true,
        "target": "es5",
        "moduleResolution": "node",
        "outDir": "dist",
        "baseUrl": ".",
        "sourceMap": true,
        "downlevelIteration": true,
        "noImplicitAny": false,
        "paths": {"*": ["node_modules/*"]}
    }
}

 

 

compierOptions

---

tsc 명령 형식의 옵션

즉, 타입스크립트에서 자바스크립트로 변환하는데 사용되는 옵션

 

 

module

---

tsconfig.ts 파일에서 compilerOptions 항목의 module 키는 동작 대상 플랫폼이 웹 브라우저인지 Node.js인지 구분하여 그에 맞는 모듈 방식으로 컴파일하려는 목적으로 설정합니다.

타입스크립트 소스코드가 컴파일되어 만들어진 ES5 자바스크립트 코드는 웹 브라우저와 Node.js양쪽에서 모두 동작해야합니다.

웹 브라우저와 Node.js는 물리적으로 동작하는 방식이 달라 양쪽에서 각각 다르게 동작합니다.

웹 브라우저는 AMD(Asynchronous Module Definition) 방식으로 동작합니다.

Node.js는 CommonJS 방식으로 동작합니다.

 

 

moduleResolution

---

moduleResolution은 웹 브라우저인지 Node.js 구분하여 키 값을 설정

module 키의 값이 commonjs 즉, Node.js이면 moduleResolution의 키 값은 node

module 키의 값이 amd 즉, 웹 브라우저면 moduleResolution 키 값은 classic

 

 

target

---

타입스크립트에서 자바스크립트로 변환할 때 사용되는 자바스크립트 버전을 입력

일반적으로 es5를 설정하며 최신 버전의 Node.js를 사용하는 경우 es6을 설정 가능

 

 

baseUrl, outDir

---

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

tsc(typescript 실행)는 tsconfig.json 파일이 존재하는 위치에서 실행하기 때문에 baseUrl은 "."로 설정하는 것이 일반적

OutDir 키는 빌드된 결과가 저장되는 위치로 "dist"로 설정하는 것이 일반적

 

 

paths

---

외부 패키지가 저장되어있는 위치를 설정

일반적으로 node-modules 디렉터리에서 찾아야하므로 키값을 'node_modules/*' 로 설정

 

 

esModuleInterop

---

자바스크립트 라이브러리 중에는 웹 브라우저(AMD)에서만 동작한다는 가정으로 만들어진 것이 있는데, 이는 Node.js(commonjs) 방식으로 동작하는 타입스크립트 코드에 혼란을 야기

따라서 원할하게 패키지를 작동하기 위해서는 해당 키값을 "true"로 설정

 

 

sourceMap

---

키값을 'true'로 설정하게 되면 타입스크립트에서 자바스크립트로 변환 시 디렉터리에 .js 파일 이외에도 js.map 파일을 생성

이는 소스맵 파일이라고 부르며 변환된 타입스크립트 코드가 어디에 해당하는지를 알려줌으로 주로 디버깅할 떄 사용

 

 

downlevellteration

---

생성기 정상 동작을 위한 키값을 'true'로 설정

 

 

noImplicitAny

---

 

키 값을 'false'로 지정하는 경우 매개변수에 타입을 명시하지 않아도 문제로 인식하지 않음

// 'ture'로 설정하는 경우 오류 발생
// 'false'로 지정하는 경우 오류 미발생
const test = (a, b) => { ... }

 

 

include

---

 

타입스크립트가 저장되어있는 대상 파일 목록의 위치

'src/**/*' 은 src 하위 디렉터리에 있는 모든 파일을 컴파일 대상으로 포함한다는 의미

 

 

Do it 타입스크립트 프로그래밍 / 이지스퍼블리싱 참고하였습니다.