TIL 221120 tsconfig

tsconfig는 타입스크립트 파일을 자바스크립트 파일로 컴파일할 때 속성들을 설정해주는 파일이다.

매우 많은 옵션이 있지만 여러 강의에서 소개하는 옵션들과 vite로 생성한 프로젝트에 있는 옵션들에 대해 찾아봤다.

 

터미널에서 tsc --옵션을 해서 타입스크립트 파일을 컴파일할 수 있다.

 

--help

명령어에 대한 도움말을 볼 수 있다.

 

--init

config를 만드는 명령어. 하지만 직접 파일을 생성해도 된다.

 

compilerOptions : Object

allowJs : boolean

기본적으로 타입스크립트에서는 js파일을 허용하지 않는다. 보통 학습할 때 js에서 ts로 많이 넘어오는데 js파일을 순차적으로 변경한다고 하면 모든 js파일을 ts파일로 바꿀때까지 배포가 불가능하다. 파일의 개수가 엄청 많다면 곤란해진다. 이럴 때 allowJs 옵션을 true로 준다면 js파일과 ts파일을 같이 사용할 수 있다. 또한 js파일을 js의 버전에 따라서 컴파일을 다르게 할 때도 사용할 수 있다.

 

baseUrl : string

기본 경로를 정할 때 사용한다.

 

declaration : boolean

d.ts파일을 만들고 싶다면 true로 하면 된다. 컴파일시 d.ts파일도 함께 생성된다.

 

declarationDir : string

위 옵션을 활성화했을 때 생성되는 d.ts파일들이 담길 폴더를 설정해준다.

 

esModuleInterop : boolean

import React from 'react';
import * as React from 'react';

ES6와 CommonJS의 import는 방법이 다르다. 위 2개의 import는 다른데 이럴 때 뜨는 오류를 해결하기 위해서 사용할 수도 있다.

 

allowSyntheticDefaultImports : boolean

위 옵션을 true로 하면 함께 true가 되며 불러오려는 모듈에 export default가 없을 때도 import XXX를 사용할 수 있도록 한다.

 

emitDecoratorMetadata : boolean

데코레이터를 쓸 때 켜면 된다. 컴파일시 데코레이터에 대한 메타데이터를 함께 보낼지에 대한 설정이다.

 

jsx : string

리액트나 리액트 네이티브를 사용할 때 사용하면 된다.

 

target : string

컴파일러가 출력할 js 문법의 버전을 정해준다.

 

lib : string[]

컴파일할 때 포함 될 라이브러리의 목록이다.

 

module : string

컴파일을 마친 자바스크립트 모듈이 어떤 시스템을 사용할지 설정하는 옵션이다.

 

moduleResolution : string

컴파일러가 import가 어떤 모듈을 가리키는지를 해석하는 방법과 관련한 옵션이다. classic과 node가 있다.

 

resolveJsonModule : boolean

 json파일로 구현된 모듈 사용여부에 대해서 설정하는 옵션이다.

 

isolatedModules: boolean

프로젝트내에 모든 소스코드 파일을 모듈로 강제로 만들도록 한다. true로 돼 있다면 모듈로 소스코드를 작성하지 않을 경우 에러를 출력한다. 만약 babel과 같은 외부 도구를 사용한다면 true로 설정하는 것이 좋다.

 

noEmit : boolean

true로 설정하면 최종결과물이 나오지 않게 된다. 

 

skipLibCheck : boolean

외부 라이브러리 모듈의 .d.ts파일의 타입정의가 잘못되어있어 오류가 나는 경우에 true로 지정하면 .d.ts파일의 타입 검사를 생략 시킬 수 있다.

 

forceConsistentCasingInFileNames : boolean

사용할 파일의 이름을 대소문자까지 정확하게 작성하도록 하는 설정이다.

 

outDir : string

컴파일한 파일이 생성될 경로를 정해준다.

 

rootDir : string

컴파일할 루트 경로를 설정해준다.

 

sourceMap : boolean

컴파일시 js파일에 대한 정보를 담고있는 .js.map 파일을 함께 생성한다. 

 

inlineSources : boolean

위의 속성과 같이 활성화하면 .js.map 파일에 content에 대한 정보도 함께 생성된다.

 

strict : boolean

strict mode를 사용할지에 대한 옵션이다.

---

exclude : string[]

컴파일 하지 않을 폴더, 파일을 설정해줄 수 있다.

---

include : string[]

컴파일 할 폴더, 파일을 설정해줄 수 있다.

 

 

참고 1

참고 2

참고 3 : 타입스크립트 공식문서