Typescript - tsconfig.json란

1. package.json 파일 생성

npm init -y

yarn init -y

 

2. 타입스크립트 설치

npm install -D typescript

yarn add -D typescript

 

3. tsconfig.json 파일 생성

tsc --init

tsconfig.json 파일이 생성되면 컴파일 옵션에 포함되어져 있는 옵션들에 대한 주석이 달려있는 파일이 생성된다.

 

4. tsconfig의 주요 속성

{
  "compilerOptions": {
    "outDir": "./build/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
  },
  "exclude": ["node_modules"],
  "include": [
    "./src/**/*.ts",
    "./src/**/*.tsx"
  ]
}

 

• outDir : 타입스크립트는 타입 검사를 위해 ts, tsx 확장자로 파일을 생성한다. 이러한 파일을 실제로 배포할 때는, js 파일로 컴파일하여 배포하여야 한다. 즉, 배포를 위해 js로 컴파일된 파일들이 위치할 디렉터리 경로를 지정하는 옵션이다.
• sourceMap : 디버깅을 위해 소스맵 파일을 생성할지 안할지에 대한 옵션이다.
• noImplicitAny : 타입을 any타입으로 지정하였을 때, 오류가 발생할지 안할지에 대한 옵션이다.
• module : 생성될 모듈의 형식을 지정해준다. 종류에는 none, commonjs, amd, es5, es6, es7 ... 등이 있다. ESNext라고 지정할 경우 현재 시점의 가장 최신 버전인 es버전으로 지정한다.
• target : 컴파일될 파일의 형식을 지정해준다. 종류에는 es3, es5, es6, es7 ... 등이 있다. ESNext라고 지정할 경우 현재 시점의 가장 최신 버전인 es버전으로 지정한다.
• jsx : 리액트의 jsx 문법을 컴파일하기 위해 제공되는 옵션이다. 출력단계에서 영향을 끼치지만 타입 검사를 진행할 때는 영향을 끼치지 않는 옵션이다. 옵션의 종류에는 preserve, react, react-native 등이 있다. 

prserve : jsx코드는 그대로 유지된채 jsx 확장자로 설정된다.

react : jsx코드가 React.createElement 형식으로 출력되고 확장자는 js로 설정된다.

react-native : jsx코드는 그대로 유지된채 js 확장자로 설정된다.

 

• module과 target의 차이는?

module은 모듈 구문을 어떤 버전으로 컴파일 할지를 설정한다. 만약 import, export 형식으로 자바스크립트 파일을 불러오는 구문을 사용하였고 module을 commonjs로 설정하였다고 가정하자. 이런 경우, 컴파일된 자바스크립트 파일에 import 구문이 var x = require(...), export 구문이 module.exports = { ... } 로 변환되어 컴파일되게 된다.

 

target은 설정된 버전에 따라 자바스크립트 문법들을 해당 버전으로 변환하여 컴파일한다. const형식으로 자바스크립트 코드를 작성하였지만 target이 es5로 지정되면 var 형식으로 변환되어 컴파일되게 된다.

---

• exlclude : 컴파일에서 제외할 디렉터리 경로를 지정한다.
• include : 컴파일할 디렉터리 경로를 지정한다.

 

5. 타입스크립트 컴파일 방법

tsc

루트 경로에서 tsc 입력하면 컴파일이 이루어진다.