컴파일러 옵션
allowJs
타입스크립트 컴파일러가 .ts 뿐만아니라 .js 파일도 컴파일 하게끔 허용한다. 기본적으로 타입스크립트 프로젝트에서 js파일은 허용하지 않는다. 이 옵션을 true로 설정하면 js프로젝트를 점진적으로 ts프로젝트로 변환 시킬 수 있다.
이 옵션은 보통 자바스크립트 파일의 에러를 체크해주는 checkJS 옵션과 같이 사용한다. allowJs와 checkJs는 세트이다.
baseUrl
기본 경로를 설정할때 사용한다.
// import { bar } from '../../../../bar';프로젝트를 하다보면 ../../ 와 같이 상대경로로 모듈들을 가져와야 해서귀찮을 때가 있다.
import { bar } from '@src/bar';이렇게 짧게 모듈을 바로 가져오고 싶을때 사용하는것이 baseUrl이다.
tsconfig.json에 이렇게 설정해주면 타입스크립트 컴파일러가 @src/bar 부분분을 컴파일 해서 모듈을 정확히 찾아올 수 있다.
{
"compilerOptions": {
...
"baseUrl": ".", // 프로젝트 루트를 기준으로
"paths": {
"@src/*": [ // @src/는
"src/*" // src/로 해석해라.
]
}
}
}declaration
하나의 .ts파일에서 타입과 모듈을 동시에 작성할 수 도 있지만 타입 정의 때문에 파일 크기가 커지는 경우에는 타입 정의 부분만 따로 분리하고 싶은 경우가 있다. 이럴때 타입 정의 파일인 d.ts를 만들어야 하는데 그렇게 하고 싶다면 컴파일러 옵션에서 — declaration을 true로 설정해야 한다.
esModuleInterop
잘못쓰면 위험한 옵션이다.
import React from 'react';
import * as React from 'react';어떤 모듈을 불러올때 위 두가지 방법으로 불러올 수 있고 사실 아래 방법이 더 공식적으로 맞는 방법이다. 그래서 타입스크립트 컴파일러는 1번 방법으로 모듈을 import할 경우 에러를 낸다. 이 에러를 없애기 위해서 컴파일러 옵션에 esModuleInterop을 true로 줄 수도있지만 잘 모르고 이 옵션을 true로 할 경우 위험할 수 있다. es6의 모듈 시스템을 잘 이해한 상태에서 이 옵션을 true로 하자.
jsx
타입스크립트 컴파일러는 .ts -> .js 변환 뿐만아니라 .tsx -> .jsx도 변환해준다. 이 옵션의 3가지 모드를 통해서 jsx까지만 컴파일 할건지, 더 나아가 js로 까지 만들어줄건지를 결정해줄 수 있다.
“preserve” 모드(기본)를 주면 tsx -> jsx로만 변환해준다. jsx-> js로 변환하는건 바벨을 거쳐야한다.
“react” 모드를 주게 되면 타입스크립트 컴파일러가 리액트에서 사용하는 형식으로 tsx -> jsx -> js 까지 변환해준다.
“react-natvie” 모드를 주게 되면 타입스크립트 컴파일러가 리액트 네이티브에서 사용하는 형식으로 tsx-> jsx -> js로 변환해준다.
lib
자바스크립트 버전에 대한 타입정의 파일(d.ts)중 어떤것들을 포함시킬건지 선택하는 옵션이다. 내가 프로젝트에서 최신 문법을 쓸것이라면 ES2018 이상을 lib옵션에 줘야한다.
outDir, outFile
.ts나 .tsx파일을 컴파일한 .js나 .jsx파일을 어느 디렉토리에 놓을것인지 경로를 정하는 옵션이다.
types, typeRoots
남이 만든 d.ts파일을 가져다 쓸 수도 있지만 내가 직접 d.ts를 정의할 수도 있다. 이럴때 그 타입설정파일의 경로를 이 옵션에 적어주어야한다.
strict
문법 검사를 얼마나 엄격하게 할것인지 정하는건데 기본적으로 false이다. 하지만 true로 켜놓고 개발해야 타입스크립트의 장점을 누릴 수 있다. 다른 옵션은 몰라도 이 옵션만 켜놔도 타입스크립트의 대부분의 장점을 누릴 수 있다.
include, exclude
어떤 파일들을 꼭 컴파일 할것인지/컴파일에서 제외할것인지를 정한다.
extends
tsconfig.json 파일을 상속받는다. 하나의 폴더에 여러개의 타입스크립트 프로젝트가 있는 경우 루트에 tsconfig.json이 하나 공통으로 존재하고 각 서비스별로 tsconfig.json이 사용될 수 있다. 이런 경우 각 서비스의 tsconfig에서 루트에 있는 공통 tsconfig를 extends해서 사용할 수 있다.
