[TypeScript] tsconfig.json 의 기본 옵션 (basic options)

해리포터·2022년 12월 7일

{
	"compilerOptions": {
		/* basic options */
		"target": "es6", 
		"module": "commonjs",
		"lib": [ 
			// 이렇게 lib를 세팅하면 JavaScript의 기본 기능들을 사용할 수 있다. 
			// 이 네가지 옵션이 target을 es6로 했을 때 lib의 default 옵션이다. -> 안 쓰는것과 똑같다
			// (lib이 비활성화 되었을때 default로 설정되어 있는 것들)
			"dom",
			"es6",
			"dom.iterable",
			"scripthost"
		],
		// "allowJs": true, // .ts가 아니어도 타입스크립트가 자바스크립트로 컴파일 함
		// "checkJs": true, // 컴파일 하지 않지만 syntax를 확인해서 potential error를 알려준다 -> TS 쓰기는 싫지만 TS의 기능을 사용하고 싶을 때 사용
		// "jsx": "preserve", // ReactJS 쓸 때 사용
		// "declaration": true, // 라이브러리 만들 때 사용 .d.ts 파일
		// "declarationMap": true, 
		// "sourceMap": true, // 디버깅과 개발할 때 도움을 준다. 디렉토리에 .map 파일 생성
		// "outFile": "./",
		// "outDir": "./",
		// "rootDir": "./",
		// "composite": true,
		// "removeComments": true,
		// "noEmit": true,
		// "importHelpers": true,
		// "downlevelIteration": true,
		// "isolatedModules": true,
		// "noEmitOnError": false,
	}
}

sourceMap

디버깅과 개발할 때 필요
compilerOptions에서 sourceMap 옵션을 설정하고 터미널에 tsc를 실행하면 디렉토리에 .map 파일이 생성된다
개발자도구 Sources 탭에서 .ts 파일을 확인할 수 있다. ⇒ 디버깅 용이 ✨

outDir

컴파일 된 js 파일이 생성되는 위치

프로젝트의 규모가 커질 수록 파일의 구조가 잘 정리 되어야 한다. (즉, 모두 root 폴더에 위치하면 안된다!)
dist 와 src 폴더로 프로젝트 파일 구조를 관리한다.

dist 폴더 → output이 담겨있는 파일 ⇒ .js 파일들

src 폴더 → input이 담겨있는 파일 ⇒ .ts 파일들

타입스크립트 파일을 컴파일하면 같은 폴더 내에 .js 파일이 생성된다.

compilerOptions에서 outDir 옵션을 설정하면 .js 파일이 생성되는 위치를 지정할 수 있다.

"outDir": "./dist", // 컴파일 된 js 파일이 dist 폴더에 생성된다.

(참고) 만약 src 폴더 내에 하위폴더에 있는 .ts 파일을 컴파일 했다면, dist 폴더 내에 같은 이름의 하위폴더가 생성되고 그 안에 .js 파일이 생성된다.

❗️ index.html의 script src 수정하기

outDir 옵션을 설정했다면 index.html의 script 태그를 수정해야 한다.

<script src="dist/app.js" defer></script>
<script src="dist/analytics.js" defer></script>

rootDir

컴파일 할 ts 파일의 root를 지정해서, 그 위치를 기준으로 컴파일한다.

만약 rootDir를 설정하지 않은 채로 user 폴더(dist, src와 같은 위치) 안에 있는 .ts 파일을 컴파일 하게 된다면, 컴파일 후 dist 폴더 내에 user 폴더 뿐 만아니라 src 폴더도 생성된다.

이런 경우를 방지하기 위해 rootDir를 “./src” 로 설정한다.

"rootDir": "./src",

removeComments

컴파일 시 주석이 제거된다.
true로 설정하면, .ts 파일 내의 주석들은 .js 파일에서 제거된다.
- 파일의 크기를 작게 만들 수 있으므로 좋은 옵션이 될 수 있다.

noEmit

true로 설정하면, 컴파일 해도 .js 파일이 생성되지 않는다.
- .js 파일을 생성하지 않고 .ts 파일에 에러가 없는지 확인 하고 싶을 때 사용한다.

downlevelIteration

자바스크립트 구 버전으로 컴파일 할 경우, 간혹 for 문이 제대로 컴파일 되지 않는 경우가 발생한다.
그럴 때 이 옵션을 활성화시키면 정확하게 for문을 컴파일 할 수 있다.
단, 이 옵션을 항상 설정하기 보다는, 반복문이 있고 위와 같은 문제가 발생했을 때만 설정하는 것이 좋다.