tsconfig.json 설정

compilerOptions 프로퍼티에는 컴파일 옵션을 설정하며, 생략한 경우 기본 컴파일 옵션이 사용된다.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true
  }
}

 

컴파일 대상 파일을 지정하기 위해 files 또는 include 프로퍼티를 사용한다. 만약 files 프로퍼티를 정의하였다면 include 프로퍼티는 무시된다.

files 프로퍼티에는 컴파일 대상 파일의 상대 경로 또는 절대 경로를 명시적으로 설정한다.

{
  "files": [
    "src/file1.ts",
    "src/file2.ts"
  ]
}

 

include 프로퍼티에는 컴파일 대상 리스트를 설정한다. exclude 프로퍼티에는 컴파일 대상에서 제외할 파일 리스트를 설정한다.

src/**/*는 src 폴더 내에 있는 모든 서브 폴더 내의 모든 파일(.ts, .tsx)을 의미하며, 컴파일 옵션 "allowJS": true를 설정하면 .js와 .jsx 파일도 컴파일 대상이 된다.

{
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

 

vscode에서 task runner 설정하는 방법

타입스크립트 코드를 자바스크립트로 트랜스파일링하기 위해서는 타입스크립트 컴파일러를 실행해야한다. 하지만 컴파일러는 vscode 외부에 존재하므로 vscode와 타입스크립트 컴파일러간의 연동이 필요하다.

vscode는 task runner로 외부의 툴을 vscode와 연동할 수 있도록 한다. cli로 실행되는 툴들을 vscode에서 실행시킬 수 있도록 하는 것이다.

 

• command + shift + p를 누르고 "Confiure Task Runner"를 입력한다.
• "TypeScript - tsconfig.json"을 선택한다.
• .vscode라는 숨겨진 폴더에 아래와 같은 tasks.json 파일이 생성된다.

{
  "version": "0.1.0",
  "command": "tsc",
  "isShellCommand": true,
  "args": ["-p", "."],
  "showOutput": "silent",
  "problemMatcher": "$tsc"
}

• command + shift + b를 누르면 컴파일된 js 파일이 생성된다.
• 코드의 변경을 감시하도록 task runner의 설정을 변경한다.

{
  "version": "0.1.0",
  "command": "tsc",
  "isShellCommand": true,
  "args": ["-w", "-p", "."],
  "showOutput": "always",
  "isWatching": true,
  "problemMatcher": "$tsc-watch"
}

 

코드를 변경할 때마다 컴파일러가 실행된다.