Typescript 컴파일 설정

Javascript를 Typescript 전환하는 방법

• 비주얼 스튜디오 코드(VSCode)로 자바스크립트 페어링
• 자바스크립트용 타입스크립트 컴파일러 사용
• 자바스크립트 파일을 타입스크립트 파일로 변환
• 엄격한 타입 체크

Compilation Context
기본적으로 TypeScript 가 어떤 것이 유효하고 어떤 것이 유효하지 않은지 결정하기 위한 용어
컴파일 컨텍스트에는 어떤 파일에 대한 정보와 함께 어떤 컴파일러 옵션을 사용하는지에 대한 정보가 포함

 

Typescript 컴파일

tsconfig.json

• 명령어를 매번 입력하지 않고 컴파일 설정 파일 생성하여 사용
• TypeScript 프로젝트의 루트 디렉토리(Root Directory)에 위치
• tsconfig.json을 사용할 경우
  • 인풋 파일이 없는 tsc 명령 : tsconfig.json에 설정된 모든 디렉토리를 체인하여 컴파일
  • 인풋 파일이 없는 tsc 명령 : -p 옵션 사용, 특정 디렉토리 내에 있는 tsconfig.json or 유효한 JSON파일 설정
• tsconfig.json을 사용하지 않을 경우
  • 인풋 파일이 있는 tsc <파일.ts> 명령일 경우, tsconfig.json 파일 무시
  • tsconfig.json파일 내 설정된 컴파일 옵션보다 명령어가 우선

tsconfig.json 생성

$ tsc --init

• 최상위 프로퍼티 8개
  1. compileOnSave
  2. extends
  3. compileOptions
  4. files
  5. include
  6. exclude
  7. references
  8. typeAcquisition

{
	"compileOnSave": true,
	"extends": "path",
	"compilerOptions": {...},
	"files": [...],
	"include": [...],
	"exclude": [...],
	"references": [...],
	"typeAcquisition": 
}

 

tsconfig.json 옵션

files

• 설정 없으면 컴파일
• 상대 혹은 절대 경로의 리스트 배열
• exclude 보다 강력

{
	...
	"filesDefinition": {
    "properties": {
      "files": {
        "description": "If no 'files' or 'include' property is present in a tsconfig.json, the compiler defaults to including all files in the containing directory and subdirectories except those specified by 'exclude'. When a 'files' property is specified, only those files and those specified by 'include' are included.",
        "type": "array",
        "items": {
          "type": "string"
        }
      }
    }
  }
	...
}

 

include / exclude

• 컴파일에 포함/제외할 디렉토리/파일 경로를 설정
• 포함, 제외될 각 항목에 glob 패턴 사용
  • * 0 이상의 모든 문자와 일치 (디렉토리 분리 기호 제외)
  • ? 1개 문자와 일치 (디렉토리 분리 기호 제외)
  • **/ 모든 하위 디렉토리까지 포함
• include
  • exclude보다 약함
  • * 를 사용하면, .ts / .tsx / .d.ts 만 include (allowJS)
• exclude
  • 설정 없으면 4가지(node_modules, bower_components, jspm_packages, <outDir>)를 default로 제외
  • <outDir> 은 항상 제외

{
  // 컴파일 포함
  "include": [
    "src/**/*.tsx?"
  ],
  // 컴파일 제외
  "exclude": [
    "node_modules",
    "build",
    "**/*.(spec|test).ts"
  ],
  // 컴파일 옵션
  "compilerOptions": { ... }
}

 

compileOnSave

• true / false (default false)
• IDE에 저장할 때마다 컴파일 수행하도록 signal 전송

지원되는 IDE

• Visual Studio 2015 with TypeScript 1.8.4 이상
• atom-typescript 플러그인

{
	...
	"compileOnSaveDefinition": {
    "properties": {
      "compileOnSave": {
        "description": "Enable Compile-on-Save for this project.",
        "type": "boolean"
      }
    }
  },
	...
}

 

typeRoots, types

• typeRoots
  • 배열로 설정하며 기본값은 ["node_modules/@types"]
  • typescript가 정의돼 있는 type을 찾는 공간
  • 경로는 tsconfig.json이 있는곳에서 부터 상대 경로로 작성
  • 지정한 type 경로는 외부 라이브러리가 제공하는 모듈 타입 정의를 위해 사용
• types

 

{
	...
  "typeRoots": {
		"description": "Specify list of directories for type definition files to be included. Requires TypeScript version 2.0 or later.",
    "type": "array",
    "items": {
	    "type": "string"
    }
  },
  "types": {
	  "description": "Type declaration files to be included in compilation. Requires TypeScript version 2.0 or later.",
    "type": "array",
    "items": {
	    "type": "string"
    }
  }
	...
}

 

 

 

@types

• TypeScript 2.0 부터 사용 가능한 내장 type definition 시스템
• 설정이 없으면 node_modules/@types라는 모든 경로를 찾아서 사용

typeRoots를 사용하는 경우

• 배열 안에 들어있는 경로 하위에서만 가져옴
• typeRoots와 types 같이 사용 X

typeRoots를 사용하는 경우

• 배열 안의 모듈 or ./node_modules/@types/ 안의 모듈에서 찾아옴
• [] 빈 배열을 넣는것 = 이용하지 않겠다
• typeRoots와 types 같이 사용 X

 

target과 lib

target

• 빌드 결과물 버전 설정
• defalut 값 es3

lib

• 기본 type definition 라이브러리 설정
• defalut 값
  • target 이 'es3' 이고, 디폴트로 lib.d.ts 사용
  • target 이 'es5' 이면, 디폴트로 dom, es5, scripthost 사용
  • target 이 'es6' 이면, 디폴트로 dom, es6, dom.iterable, scripthost 사용
• lib를 지정
  • lib 배열로만 라이브러리를 사용
  • 빈 [] ➡ 'no definition found ... '

{
	...
	"target": {
	  "description": "Specify ECMAScript target version. Permitted values are 'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018' or 'esnext'.",
    "type": "string",
    "default": "es3",
    "anyOf": [
	    {
	      "enum": [
	        "es3",
          "es5",
          "es6",
          "es2015",
          "es2016",
          "es2017",
          "es2018",
          "esnext"
        ]
      }
			{
	      "pattern": "^([eE][sS]([356]|(201[5678])|[nN][eE][xX][tT]))$"
      }
    ]
  },
  "lib": {
	  "description": "Specify library file to be included in the compilation. Requires TypeScript version 2.0 or later.",
    "type": "array",
    "items": {
    "type": "string",
    "enum": [
			"es5",
			"es6",
			"es2015",
			"es7",
			"es2016",
			"es2017",
			"es2018",
			"esnext",
			"dom",
			"dom.iterable",
			"webworker",
			"scripthost",
      "es2015.core",
			"es2015.collection",
			"es2015.generator",
			"es2015.iterable",
			"es2015.promise",
			"es2015.proxy",
			"es2015.reflect",
			"es2015.symbol",
			"es2015.symbol.wellknown",
			"es2016.array.include",
			"es2017.object",
			"es2017.intl",
			"es2017.sharedmemory",
			"es2017.string",
			"es2017.typedarrays",
			"es2018.intl",
			"es2018.promise",
			"es2018.regexp",
			"esnext.asynciterable",
			"esnext.array",
			"esnext.intl",
			"esnext.symbol"
		]
	},
  ...
}

 

outDir, outFile

• outDir
  • files와 include를 통해 선택된 파일들의 결과가 저장되는 디렉터리 지정
• outFile
  • 모든 파일을 하나의 파일로 합쳐서 출력할 경우 지정
  • module이 none, system 또는 amd가 아닌 경우 사용 불가

{
	...
  "outFile": {
		"description": "Concatenate and emit output to single file.",
		"type": "string"
	},
	"outDir": {
		"description": "Redirect output structure to the directory.",
		"type": "string"
	},
	...
}

 

noEmit

• true 설정 시 최종결과물 출력 안됨
• 단순 타임 체크용으로 사용할 것인지 아니면 tsc를 컴파일용으로 사용할 것인지 지정

 

declaration

• true 설정 시 해당 .ts 파일의 .d.ts 파일 또한 같이 출력물에 포함

 

emitDeclarationOnly

• true 설정 시 출력물에 declaration 파일만 나옴

 

sourceMap

• true 설정 시 출력물에 .js.map 이나 .jsx.map 파일 포함
• inlineSourceMap을 true로 지정 시 .js 파일 내부에 source map 포함
• 두 속성 같이 사용 불가

 

module

• module
  • 컴파일 된 모듈 결과물 설정
  • target 이 'es6'면 디폴트 es6
  • target 이 'es6' 가 아니면 디폴트 commonjs 
  • AMD 나 System과 사용하려면, outFile이 지정
  • ES6 나 ES2015를 사용하려면, target이 es5 이하
• moduleResolution
  • ts 소스에서 모듈 사용하는 방식 지정
  • Classic 아니면 Node
  • CommonJS 일때만 Node
• paths와 baseUrl
  • baseUrl로 꼭지점과 paths 안의 키/밸류로 모듈을 가져가는 방식
• rootDirs
  • 배열 안에서 상대 경로 찾는 방식

{
	...
	"module": {
		"description": "Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015' or 'esnext'.",
		"type": "string",
		"anyOf": [
			{
				"enum": [
					"commonjs",
					"amd",
					"umd",
					"system",
					"es6",
					"es2015",
					"esnext",
					"none"
				]
			},
			{
				"pattern": "^([cC][oO][mM][mM][oO][nN][jJ][sS]|[aAuU][mM][dD]|[sS][yY][sS][tT][eE][mM]|[eE][sS]([356]|(201[567])|[nN][eE][xX][tT])|[nN][oO][nN][eE])$"
			}
		]
	},
	...
}

 

strict

• 정의해놓은 코드에서 강하게 타입을 정의
•  default 값 false
• typescript의 type 검사 옵션 중 strict* 관련된 모든 것 true로 만듬

{
	...
	"strict": {
		"description": "Enable all strict type checking options. Requires TypeScript version 2.3 or later.",
		"type": "boolean"
	},
	...
}

 

Reference

• https://www.typescriptlang.org/docs/handbook/compiler-options.html
• https://www.typescriptlang.org/
• https://www.notion.so/TypeScript-Cookbook-727820ac0d4544498ebe732e940816f4
• https://www.samsungsds.com/kr/insights/typescript.html
• https://yamoo9.gitbook.io/typescript/cli-env