[TS] TypeScript CompileOptions 정리

Toproot·2021년 9월 2일

CompileOption typescript

TypeScript

목록 보기

2/5

1. compileOptions - typeRoots, types

@types

type : 우리의 프로젝트에서 라이브러리를 사용했을 때 JS 이기 때문에 Type이 지정되어 있지 않기 때문에 이러한 타입설정을 도와줌.

# 실습

# react 설치
npm i react

# ts에서 에러발생 => npm i --save-dev @types/react 요구
# 지금 배울 types는 여기의 @types를 의미.

"typeRoots": {
	"description": "Specify multiple folders that act like `./node_modules/@types`.",
	"type": "array",
	"uniqueItems": true,
	"items": {
	"type": "string"
	},
	"markdownDescription": "Specify multiple folders that act like `./node_modules/@types`.\n\nSee more: https://www.typescriptlang.org/tsconfig#typeRoots"
},

"types": {
	"description": "Specify type package names to be included without being referenced in a source file.",
	"type": "array",
	"uniqueItems": true,
	"items": {
	"type": "string"
	},
	"markdownDescription": "Specify type package names to be included without being referenced in a source file.\n\nSee more: https://www.typescriptlang.org/tsconfig#types"
},

typeRoots에 배열로 추가해서 사용.
default 이외에 사용자 임의의 type을 사용할 때 추가하여 사용.

TypeScript2.0 부터 사용 가능해진 내장 type definition 시스템
아무 설정을 안하면?
- 배열 안에 들어있는 경로들 아래서만 가져옵니다.
types 를 사용하면?
- 배열 안의 모듈 혹은 ./node_modules/@type/ 안의 모듈 이름에서 찾아옵니다.
- [] 빈 배열을 넣는다는건 이 시스템을 이용하지 않겠다는 것입니다.
typeRoots와 types를 같이 사용하지 않습니다.

2. compileOptions - target 과 lib 🔥

프로젝트 설정의 기본이 되고 중요한 설정!
target : 어떤 런타임에서 실행 할 수 있는 지 결정해줌.
기본적인 type definition이 되어 있어야 함.
lib : 내가 최종적으로 실행하고자 하는 환경에 맞게 기본 타입들을 결정해서 작업에 문제가 없도록 사전에 예방을 해줌.

target

"target": {
	"description": "Set the JavaScript language version for emitted JavaScript and include compatible library declarations.",
	"type": "string",
	"default": "ES3",
	"anyOf": [
	{
		"enum": [
		"ES3",
		"ES5",
		"ES6",
		"ES2015",
		"ES2016",
		"ES2017",
		"ES2018",
		"ES2019",
		"ES2020",
		"ES2021",
		"ESNext"
	]
	},
	{
	"pattern": "^([Ee][Ss]([356]|(20(1[56789]|2[01]))|[Nn][Ee][Xx][Tt]))$"
	}
	],
	"markdownDescription": "Set the JavaScript language version for emitted JavaScript and include compatible library declarations.\n\nSee more: https://www.typescriptlang.org/tsconfig#target"
},

ES5, ES6 등 버전을 target에 작성해주어 그에 맞도록 JS 파일로 컴파일 해줌
빌드의 결과물을 어떤 버전으로 할 것이냐에 관한 설정
지정을 안하면 ES3 입니다.

lib

"lib": {
	"description": "Specify a set of bundled library declaration files that describe the target runtime environment.",
	"type": "array",
	"uniqueItems": true,
	"items": {
	"type": "string",
	"anyOf": [
	{
	"enum": ["ES5",
		"ES6",
		"ES2015",
		"ES2015.Collection",
		"ES2015.Core",
		"ES2015.Generator",
		"ES2015.Iterable",
		"ES2015.Promise",
		"ES2015.Proxy",
		"ES2015.Reflect",
		"ES2015.Symbol.WellKnown",
		"ES2015.Symbol",
		"ES2016",
		"ES2016.Array.Include",
		"ES2017",
		... ]
	},
	{
	"pattern": "^[Ee][Ss]5|[Ee][Ss]6|[Ee][Ss]7$"
	},

ex. console과 같은 경우도 lib로 default로 사용될 수 있도록 정의가 되어있는 것.
기본 type definition 라이브러리를 어떤 것을 사용할 것이냐
lib를 지정하지 않을 때,
- target 이 'es3'이고, 디폴트로 lib.d.ts 를 사용합니다.
- target 이 'es5'이고, 디폴트로 dom, es5, scripthost 를 사용합니다.
- target 이 'es6'이고, 디폴트로 dom, es6, dom.iterable, scripthost 를 사용합니다.
lib를 지정하면 그 lib 배열로만 라이브러리를 사용합니다.
- 빈 [] ⇒ "no definition found 어쩌구" 에러 발생.

ECMAScript 6 compatibility table

실제 프로젝트는 이러한 타입들이 다르거나 사용하는 lib가 다를 수 있으므로 공식문서를 통한 정확한 이해가 필요함!

⇒ 효율적으로 코드를 돌릴 수 있는 방법.

3. compileOptions - outDir, outFile, rootDir

"outFile": {
	"description": "Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output.",
	"type": "string",
	"markdownDescription": "Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output.\n\nSee more: https://www.typescriptlang.org/tsconfig#outFile"
},

"outDir": {
	"description": "Specify an output folder for all emitted files.",
	"type": "string",
	"markdownDescription": "Specify an output folder for all emitted files.\n\nSee more: https://www.typescriptlang.org/tsconfig#outDir"
},

"rootDir": {
	"description": "Specify the root folder within your source files.",
	"type": "string",
	"markdownDescription": "Specify the root folder within your source files.\n\nSee more: https://www.typescriptlang.org/tsconfig#rootDir"
},

컴파일할 파일들의 컴파일 후에 저장되는 파일들의 경로 설정을 도와줌.
rootDir을 설정안해주면 ts파일의 상위 폴더를 root로 지정하고 생성함.

4. compileOptions-strict

무조건 작업을 시작할 때 strict를 true로 설정하고 시작하기!

"strict": {
	"description": "Enable all strict type checking options.",
	"type": "boolean",
	"default": false,
	"markdownDescription": "Enable all strict type checking options.\n\nSee more: https://www.typescriptlang.org/tsconfig#strict"
},