tsconfig는 타입스크립트 파일을 자바스크립트 파일로 컴파일할 때 속성들을 설정해주는 파일이다.
매우 많은 옵션이 있지만 여러 강의에서 소개하는 옵션들과 vite로 생성한 프로젝트에 있는 옵션들에 대해 찾아봤다.
tsc 명령어
나는 주로 vite를 사용해 프로젝트를 진행하므로 사용할 일은 없어보인다.
터미널에서 tsc --옵션을 해서 타입스크립트 파일을 컴파일할 수 있다.
--help
명령어에 대한 도움말을 볼 수 있다.
--init
config를 만드는 명령어. 하지만 직접 파일을 생성해도 된다.
ts 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를 사용할지에 대한 옵션이다.
types : string[]
포함해야하는 타입 유형을 지정한다. 반드시 필요한 것은 아니지만 프로젝트에 포함할 유형 선언 파일(.d.ts 파일)을 명시적으로 지정하여 에디터의 유형 정보 및 자동 완성 기능에 도움이 된다.
프로젝트에서 메인으로 사용하는 라이브러리나 환경을 포함하는 것이 좋다. 불필요하게 너무 많이 포함하면 컴파일 시간이 늘어날 수 있다.
// 예시
{
"compilerOptions": {
"types": ["node", "jest", "express"]
}
}exclude : string[]
컴파일 하지 않을 폴더, 파일을 설정해줄 수 있다.
include : string[]
컴파일 할 폴더, 파일을 설정해줄 수 있다.
