2017년 11월 15일

2/ Typescript_tsconfig.json 프로퍼티의 종류

타입스크립트 정리 글은 이웅재님의 강의 와 강의록 을 참고하여 작성하였습니다. (짱짱) 오류가 있다면 언제든지 댓글 부탁드립니다.

컴파일러 옵션

실제 프로젝트에서는 컴파일러 옵션을 그렇게 많이 셋팅하진 않는다 . 옵션을 셋팅할 수 있는 전체 스펙은 이 링크 로 가면 확인가능하다 .

1. 최상위 프로퍼티

tsconfig.json 파일에서 제일 상위에 정의되어있는 컴파일 옵션들

compileOnSave
extends
compileOptions ( 초기에는 compileOptions 요소가 많이 존재한다 .)
files
include
exclude

2. compileOnSave

파일 변경 후 저장하면 바로 컴파일을 해준다 . 에디터마다 안될 수도 있다.

true / false (default false)
- true 이면 저장하면 바로 컴파일됨
최상단에 설정해야 한다.
누가 ??
- Visual Studio 2015 with TypeScript 1.8.4 이상
- atom-typeScript 플러그인

3. extends

보통 많이 사용하지 않는다 . 사용 예를 들면 , 클라이언트 타입스크립트와 서버사이드 타입스크립트가 있을 때, 설정이 비슷하다면 어떤 파일을 만든 후, 상속을 받아서 작은 부분만 바꿔서 쓰는 경우 사용 가능하다.

파일 (상대) 경로명 : string
TypeScript 2.1 New Spec


 // in config/base.json
{
  "compilerOptions": {
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}
 
// in tsconfig.json
{
  "extends": "./configs/base",
  "files": [
    "main.ts",
    "supplemental.ts"
  ]
}

4. files, include, exclude

셋다 설정이 없으면 , 전부다 컴파일
files
- 상대 혹은 절대 경로의 리스트 배열.
- 파일별 부분 컴파일이 된다.
- exclude 보다 쎕니다. (exclude가 해놓아도 files 에 있으면 컴파일 실행된다는 뜻)
- 특정 폴더를 exclude가 있어도 컴파일 된다.
include, exclude
- glob 패턴 (마치 .gitignore)
- include
  - exclude 보다 약하다.
  - - 같은걸 사용하면 , .ts / .tsx / .d.ts 만 include (allowJS)
- exclude
  - 설정 안하면 4가지 (node_modules, bower_components, - jspm_packages, <outDir>)를 default 로 제외한다 .
  - <outDir> 은 항상 제외합니다 . (include 에 있어도 )

5.@types (중요 !)

TypeScript 2.0 부터 사용 가능해진 내장 type definition 시스템

이전 버전에서는 사용하지 못한다.
아무 설정을 안하면 ?
- node_modules/@types 라는 모든 경로를 찾아서 사용
typeRoots 를 사용하면 ?
- 배열 안에 들어있는 경로들 아래서만 가져옵니다 .
types 를 사용하면 ?
- 패키지 이름입니다.
- 배열 안의 모듈 혹은 ./node_modules/@types/ 안의 모듈 이름에서 찾아옵니다 .
- [] 빈 배열을 넣는다는건 이 시스템을 이용하지 않겠다는 것입니다 .
  - 블루베리 플젝에서는 types 를 사용한다 .
typeRoots 와 types 를 같이 사용하지 않습니다 .


// compiileOptions : type
{
  "type": "object",
  "description": "Instructs the TypeScript compiler how to compile .ts files.",
  "properties": {
    "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"
      }
    }
  }
}

6. compileOptions

6-1. target과 lib


{
  "type": "object",
  "description": "Instructs the TypeScript compiler how to compile .ts files.",
  "properties": {
    "target": {
      "description": "Specify ECMAScript target version. Permitted values are 'es3', 'es5', 'es2015', 'es2016', 'es2017' or 'esnext'.",
      "type": "string",
      "default": "es3",
      "anyOf": [
        {
          "enum": [
            "es3",
            "es5",
            "es2015",
            "es2016",
            "es2017",
            "esnext" // 확정은 아니지만 곧 확정될 것 같은 문법들을 모아둔
          ]
        },
        {
          "pattern": "^([eE][sS]([356]|(201[567])|[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",
          "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.sharedmemory",
          "esnext.asynciterable"
        ]
      }
    },
    "noLib": {
      "description": "Do not include the default library file (lib.d.ts).",
      "type": "boolean"
    }
  }
}

target

빌드의 결과물을 어떤 버전으로 할 것이냐
지정을 안하면 es3 입니다.

lib

기본 type definition 라이브러리를 어떤 것을 사용할 것이냐
잘 정의하지 않으면 빨간줄이 계속 생긴다 .
lib 를 지정하지 않을 때 ,
- target 이 ‘es3’ 이고, 디폴트로 lib.d.ts 를 사용합니다.
- target 이 ‘es5’ 이면 , 디폴트로 dom, es5, scripthost 를 사용합니다 .
- target 이 ‘es6’ 이면, 디폴트로 dom, es6, dom.iterable, scripthost 를 사용합니다.
- es5 이후에는 문법별 쪼개서도 설정 가능하다 .
lib 를 지정하면 그 lib 배열로만 라이브러리를 사용하니다.
- 빈 [] => ‘no definition found 어쩌구’
- 혹은 "noLib" : true로 바꾸면 된다. ( 거의 안쓸듯 )

6-2. compileOptions: outDir, outFile

파일을 다 모아서 하나의 컴파일된 하나의 파일로 모으고 싶을 때 outFile을 사용
소스디렉토리에 그대로 똑같이 구조를 컴파일된 상태로 옮길 때 outDir 를 사용
많이 사용한다 .


{
  "type": "object",
  "description": "Instructs the TypeScript compiler how to compile .ts files.",
  "properties": {
    "outFile": {
      "description": "Concatenate and emit output to single file.",
      "type": "string"
    },
    "outDir": {
      "description": "Redirect output structure to the directory.",
      "type": "string"
    },
    "rootDir": {
      "description": "Specifies the root directory of input files. Use to control the output directory structure with --outDir.",
      "type": "string"
    }
  }
}

6-3. compileOptions: 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

배열 안에서 상대 경로를 찾는 방식입니다.


{
  "type": "object",
  "description": "Instructs the TypeScript compiler how to compile .ts files.",
  "properties": {
    "module": {
      "description": "Specify module code generation: 'none', 'CommonJS', 'Amd', 'System', 'UMD', or 'es2015'.",
      "enum": ["commonjs", "amd", "umd", "system", "es6", "es2015", "none"]
    },
    "moduleResolution": {
      "description": "Specifies module resolution strategy: 'node' (Node) or 'classic' (TypeScript pre 1.6) .",
      "type": "string",
      "pattern": "^(([Nn]ode)|([Cc]lassic))$",
      "default": "classic"
    },
    "baseUrl": {
      "description": "Base directory to resolve non-relative module names.",
      "type": "string"
    },
    "paths": {
      "description": "Specify path mapping to be computed relative to baseUrl option.",
      "type": "object"
    },
    "rootDirs": {
      "description": "Specify list of root directories to be used when resolving modules.",
      "type": "array",
      "items": {
        "type": "string"
      }
    }
  }
}

현재 플젝 tsconfig.json

처음보는 옵션들이 있어서 정리해보았다 . 참고 : 타입스크립트 공식 페이지

allowSyntheticDefaultImports: true

Allow default imports from modules with no default export. This does not affect code emit, just typechecking.
리엑트에서 컴포넌트를 import 할 때 주로 쓰는 import Something from './Something'을 사용할 수 있다 .

noImplicitAny: false