Taeyoung Kim(RaccoonCode96)

Go for IT! Raccooncode’s TIL blog.

20210507 TypeSciprt 04 tsconfig schema, compileOnSave, extends, files, exclude, include, compileOptions(types, typeRoots, target, lib, outDir, outFile, rootDir)

4 분 소요

TypeScript04

tsconfig schema

  • 각 option에 대한 설명
  • https://json.schemastore.org/tsconfig

최상위 프로퍼티

  • defintions을 기준으로 주로 사용하는 최상위 프로퍼티들
  • compileOnSave

  • extends

  • compileOptions : 어떤 식으로 컴파일 할 것인지에 대한 options

  • files : 어떤 파일들을 컴파일 할 것인지에 대한 setting
  • include

  • exclude

  • references


compileOnSave

  • file을 save하면 compile 하는 옵션(에디터에서 되는 설정이고 아무데서나 되는 것은 아님)
  • true or false 값을 줄수 있고 default는 false 값
  • VS 2015 with ts 1.8.4 이상 또는 atom-ts 플러그인 일 경우 지원함
"compileOnSaveDefinition": {
  "properties": {
  "compileOnSave": {
  "description": "Enable Compile-on-Save for this project.",
  "type": "boolean"
}
}
}


extends

  • 상속을 받아올 부모의 path를 적어 넣음 으로써 기본적인 tsconfig.json을 적용시키고 그 다음에 부모의 json 설정을 덮어쓰게 함으로써 외의 설정들로 확장 가능함
  • npm install --save-dev @tsconfig/deno 를 통해서 extends에 @tsconfig/deno/tsconfig.json 연결하면 여러가지 증명된 설정파일들을 상속 받을 수 있음 (https://github.com/tsconfig/bases#readme)
"extendsDefinition": {
"properties": {
"extends": {
"description": "Path to base configuration file to inherit from. Requires TypeScript version 2.1 or later.",
"type": "string"
}
}
}




files, exclude, include

  • files, exclude, include 설정이 모두 없는 경우 default 값은 전부다 compile 시킴

files

  • files로 지정한 path에 있는 파일이 제일 강력하게 compile 순위에 올라가서 compile됨 (include , exclude는 무시가 됨)
  • (상대 or 절대)경로는 스트링의 배열로 되어 있음
  • exclude 보다 강함
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",
"uniqueItems": true,
"items": {
"type": "string"
}
}


exclude

  • exclude로 지정한 path에 있는 파일은 compile에서 제외 됨 (단, files에는 영향을 주지 못함)
  • Glob pattern임 (.gitignore 같은 느낌)
  • 설정안하면 default 로 (node_modules, bower_components, jspm_packages, <outDir> 는 기본적으로 제외)
  • <outDir> 의 경우 include에 있어도 항상 제외됨 (<outDir>은 이미 compile된 파일들을 넣어 놓는 설정으로 다시 compile되게 하고 싶지 않기 때문에 사용함)
"exclude": {
"description": "Specifies a list of files to be excluded from compilation. The 'exclude' property only affects the files included via the 'include' property and not the 'files' property. Glob patterns require TypeScript version 2.0 or later.",
"type": "array",
"uniqueItems": true,
"items": {
"type": "string"
}
}

include

  • include로 지정한 path에 있는 파일을 compile에 추가 함 (단, files에는 영향을 주지 못함)
  • exclude 보다는 약함
  • * 기호 사용시 .ts , .tsx, .d.ts만 include 됨 (*사용시에 JS 파일도 compile 시키고 싶으면 allowJS 옵션을 켜줘야함)
  • 또한 Glob pattern임
"include": {
"description": "Specifies a list of glob patterns that match files to be included in compilation. 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'. Requires TypeScript version 2.0 or later.",
"type": "array",
"uniqueItems": true,
"items": {
"type": "string"
}
}




compileOptions

  • js 라이브러리 사용시에 type이 지정안되어 있는 경우 type을 붙여주는 도구

  • 예시) react를 TS에서 사용하게 되는 경우 -> react 라이브러리 같은 경우 JS로 되어 있어서 type을 붙여줘야 함 (안하면 compile error 발생시킴)
  • npm i --save-dev @types/react를 설치하라고 안내해서 설치하면 node_modules/@types/react가 생성되고 index.d.ts 파일을 통해 type이 붙여진 것을 확인 가능


types & typeRoots

  • TS 2.0부터 사용가능한 내장 type definition 시스템
  • 아무 설정을 안하면 node_modules/@types라는 모든 경로를 찾아서 사용
  • typeRoots 사용시 배열안에 들어 있는 경로들 아래서만 가져옴 (node_modules의 types 뿐만 아니라 내 types도 쓰겠다.)
  • types 사용시 배열안의 모듈 혹은 ./node_modules/@types/안의 모듈 이름에서 찾아옴 ([]빈 배열은 시스템을 사용하지 않겠다는 설정임)
  • typeRoots와 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`. See 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. See more: https://www.typescriptlang.org/tsconfig#types"
},




target & lib

  • target : 어떤 runtime에서 실행할지 결정
  • lib : 실행환경에 맞는 기본 defintion 필요

target

  • 빌드의 결과물을 어떤버전으로 할 것인가?
  • taget 지정하지 않은 면 es3 에서 돌릴수 있게 됨

  • 실행환경이 browser이면 es5 정도고, nodejs 이면 더 높은 단계 선택

  • 예시) arrow function 사용시 es5 와 es6 target 세팅에 대한 compile 파일 비교 -> es5는 function을 사용한 code로 compile 되고, es6는 arrow function 그대로 나옴
"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",
"ESNext"
]
},
{
"pattern": "^([Ee][Ss]([356]|(20(1[56789]|20))|[Nn][Ee][Xx][Tt]))$"
}
],
"markdownDescription": "Set the JavaScript language version for emitted JavaScript and include compatible library declarations. See more: https://www.typescriptlang.org/tsconfig#target"
},


lib

  • 기본 type definition 라이브러리를 어떤 것을 사용할 것이냐 (target에 따른 상세 세팅)

  • lib 지정하지 않을때

    • target es3 -> default lib.d.ts 사용
    • target es5 -> default dom, es5, scripthost 사용
    • target es6 -> default dom, es6, dom.iterable, scripthost 사용
  • lib 지정하면 그 lib만 라이브러리를 사용
    • 빈 [] 설정시 ‘no defintion found’ error 발생
"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",
"ES2017.Intl",
"ES2017.Object",
"ES2017.SharedMemory",
"ES2017.String",
"ES2017.TypedArrays",
"ES2018",
"ES2018.AsyncGenerator",
"ES2018.AsyncIterable",
"ES2018.Intl",
"ES2018.Promise",
"ES2018.Regexp",
"ES2019",
"ES2019.Array",
"ES2019.Object",
"ES2019.String",
"ES2019.Symbol",
"ES2020",
"ES2020.BigInt",
"ES2020.Promise",
"ES2020.String",
"ES2020.Symbol.WellKnown",
"ESNext",
"ESNext.Array",
"ESNext.AsyncIterable",
"ESNext.BigInt",
"ESNext.Intl",
"ESNext.Promise",
"ESNext.String",
"ESNext.Symbol",
"DOM",
"DOM.Iterable",
"ScriptHost",
"WebWorker",
"WebWorker.ImportScripts"
]
},
]
},
"markdownDescription": "Specify a set of bundled library declaration files that describe the target runtime environment. See more: https://www.typescriptlang.org/tsconfig#lib"
},
  • 실행환경에 따른 ES 기능 지원 표 : https://kangax.github.io/compat-table/es6/




CompileOptions : outDir, outFile, rootDir

  • outFile : 모든 출력을 하나의 javascript 파일로 묶는 파일을 지정
  • outDir : compile 해서 가져다 놓을 위치
  • rootDir : compile을 시작 할 범위를 지정하는 root dir 경로 (default project 최상위 dir를 root로 함)
    • root의 하위 폴더의 ts파일을 찾아 compile 함 (싸고 있는 폴더도 같이 구조화 시켜서 outDir 위치에 생성시킴)

참고