TypeScript - tsconfig 스키마

tsconfig 파일은 'tsc --init' 명령어를 사용했을 때 생성되는 TypeScript Compiler의 설정을 관리하는 파일입니다.

tsc 명령어를 사용하면 tsconfig.json 파일을 읽어서 실행하게 됩니다.

 

여기에서 사용되는 옵션을 간단히 알아보려 합니다.

 

 

목차

1. compileOnSave
2. extends
3. files
4. exclude
5. include
6. compileOptions

 

1. compileOnSave

• 파일을 저장했을 때, 자동으로 컴파일을 할지에 대한 옵션입니다.
• 값으로는 boolean 값을 설정할 수 있습니다(default: false)
• 단, 모든 환경에서 유효하지는 않고, 지원되는 에디터에서 유효한 옵션입니다.

{
  compileOnSave: true,
  ...
}

 

2. extends

• 다른 설정 파일을 상속받아서 사용할 수 있는 옵션입니다.
• TypeScript의 base 공식 repository: https://github.com/tsconfig/bases

{
  ...,
  "extends": "./base.json",
  ...,
}

 

3. files

• 컴파일 대상에 포함할 상대/절대 경로의 리스트 배열입니다.
• 'files' 또는 'include' 속성이 tsconfig.json에 없으면, 컴파일러는 기본적으로 'exclude'로 지정된 파일을 제외하고 포함하는 디렉터리와 하위 디렉터리의 모든 파일을 포함합니다.
• 'files' 속성이 지정되면 해당 파일과 'include'로 지정된 파일만 포함됩니다.

{
  "files": [
    "core.ts",
    "sys.ts",
    ...
  ],
  ...,
}

 

4. exclude

• 컴파일에서 제외할 파일 목록을 지정합니다.
• 'exclude' 속성은 'files' 속성이 아닌 'include' 속성을 통해 포함된 파일에만 영향을 줍니다.
• node_modules, bower_componenets, jspm_packages, <outDir>(컴파일 결과물 경로)는 default로 제외합니다.

{
  "exclude": [
    "**/*.spec.ts",
    ...
  ],
  ...
}

 

5. include

• 컴파일에 포함될 파일과 일치하는 glob 패턴(.gitignore와 같은) 목록을 지정합니다.
• 'files' 또는 'include' 속성이 tsconfig.json에 없으면, 컴파일러는 기본적으로 'exclude'로 지정된 파일을 제외한 포함 디렉터리 및 하위 디렉터리의 모든 파일을 포함합니다.
• * 을 사용하면, .ts / .tsx / .d.ts 파일만 include 합니다.
• js 파일도 컴파일에 포함시키려면, allowJS 옵션을 활성화해야 합니다.

{
  "include": ["src/**/*"],
  ...,
}

 

6. compileOptions

 

typeRoots

• 컴파일 목록에 포함시킬 노드 모듈의 경로를 지정합니다.
• TypeScript 전용 모듈을 로드할 수 있도록 해주며, default는 './node_modules/@types'이고 경로를 지정하면 해당 경로에서만 모듈을 로드합니다.
• 예를 들어, 'npm i react'와 같이 리액트 모듈을 바로 설치하면 Typing이 되어 있지 않아 오류가 발생하지만,  'npm i @types/react'로 설치하면 'node_modules/@types'에 설치된 react를 불러올 수 있는데, 이 모듈을 불러오기 위한 경로를 지정하는 것입니다.

{
  "compilerOptions": {
    "typeRoots": ["./typings", "./venter/types"],
    ...,
   }
}

위 설정대로라면, './typings', './vender/types' 경로의 모듈들만 로드합니다.

 

types

• typeRoots 경로를 기준으로, 특정 노드 모듈만 컴파일 목록에 포함시킵니다.

{
  "compileOptions": {
    "types": ["node", "jest", "express"],
    ...,
  }
}

위 설정대로라면, typeRoots의 default 경로인 './node_modules/@types'의 경로에서 'node', 'jest', 'express' 모듈만 컴파일에 포함시킵니다.

 

target

• TypeScript 컴파일 결과물에 대한 JavaScript 버전을 지정하는 옵션입니다.
• 최신 브라우저는 모든 ES6 기능을 지원하므로 ES6는 좋은 선택일 것입니다.
• 적용값: ES3, ES5, ES6, ES2015 ~ ES2020, ESNext

{
  "compilerOptions": {
    "target": "ES2016"
  }
}

 

lib

• target에서 지정한 JavaScript 버전에 포함된 API를 지정하는 옵션입니다.
• 지정하지 않으면 자동으로 'lib.dom.d.ts' 파일의 API를 사용하지만, 지정하면 지정된 API만 사용할 수 있습니다.

{
  "compilerOptions": {
    "lib": ["DOM", "ES2016.Array.Include"],
    ...
  }
}

 

outDir

• 컴파일된 .js 파일이 이 옵션에 지정된 경로에 저장됩니다.
• 지정하지 않으면, .ts 파일과 동일한 경로에 .js 파일이 저장됩니다.

{
  "compileOptions": {
    "outDir": "./dist",
    ...,
  }
}

 

outFile

• 컴파일 결과물을 단일 파일로 합쳐서 저장합니다.
• AMD 시스템과 같은 지원이 되는 환경에서만 사용할 수 있습니다.

{
  "compilerOptions": {
    "outFile": "out.js",
    ...,
  }
}

 

rootDir

• 컴파일할 파일의 root 디렉터리를 지정합니다.
• default는 tsconfig.json 파일이 포함된 디렉터리입니다.

{
  "compileOptions": {
    "rootDir": "./src",
    ...,
  }
}

 

strict

• 모든 엄격한 타입 검사 옵션을 활성화합니다.(=true). 활성화되면 아래 옵션들이 활성화 됩니다.
• noImplicitAny: 명시적으로 any 타입을 지정하지 않으면 에러를 발생시킵니다.
  •  
  • function fn(param) { // 오류: any 타입을 명시하지 않으면 오류 발생 > param: any console.log( param ); }
• noImplicitThis: this에 명시적인 타입을 지정하지 않으면 에러를 발생시킵니다.

  • function fn(name: string, age: number) {
        this.name = name; // 오류: this의 타입을 명시하지 않았음
    }
    
    // 아래와 같이 this에 타입을 지정해 주어야 한다
    function fn2(this: any, name: string, age: number) {
        this.name = name;
    }

     
• strictNullChecks: Primitive 타입에 null 또는 undefined 값을 할당할 수 없도록 합니다.

  • let str: string = null // 오류: string 타입에 null을 할당할 수 없음

• strictFunctionTypes: 함수의 매개변수가 더 엄격히 검사되도록 합니다. 타입스크립트 함수의 인자 타입이 공변적이면서, 반공변적인 문제를 해결할 수 있습니다.

  • function fn(x: string) {
        console.log(`hello, ${x.toLowerCase}`);
    }
    
    type StringOrNumberFunc = (ns: string | number) => void;
    
    let func: StringOrNumberFunc = fn; // 오류: 슈퍼 타입을 서브 타입에 대입할 수 없다(공변)

     
• strictPropertyInitialization: 클래스의 멤버변수가 생성자 함수에서 초기화되었는지 확인합니다.

  • class Person {
      private _name: string; // 오류: 멤버 변수가 생성자 함수에서 초기화되지 않았음
      
      constructor(name) {
        // this._name = name
      }
      
      public print() {
        console.log(this._name);
      }
    }

• strictBindCallApply: bind, call, apply에 대해 더 엄격한 검사를 합니다.

  • function fn(x: string) {
      return parseInt(x);
    }
    
    const n1 = fn.call(undefined, "10");
    const n2 = fn.call(undefined, false); // 에러: fn 함수 인자인 x는 string 타입이기 때문에 boolean을 전달할 수 없음

• alwaysStrict: 모든 소스 파일을 ECMAScript strict 모드에서 구문 분석되고, 각 소스 파일이 "use strict"를 내보내는지  확인합니다.

 

 

 

{
    "compilerOptions": {
    /* https://aka.ms/tsconfig.json 를 방문하면 해당 파일에 대한 더 많은 정보를 얻을 수 있습니다. */
    // 옵션은 아래와 같은 형식으로 구성되어 있습니다.
    // "모듈 키": 모듈 값 /* 설명: 사용가능 옵션 (설명이 "~ 여부"인 경우 'true', 'false') */
    /* 기본 옵션 */
    // "incremental": true, 	/* 증분 컴파일 설정 여부 */
    "target": "es5", 			/* 사용할 특정 ECMAScript 버전 설정: 'ES3' (기본), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 혹은 'ESNEXT'. */
    "module": "commonjs", 			/* 모듈을 위한 코드 생성 설정: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    // "lib": [], 					/* 컴파일에 포함될 라이브러리 파일 목록 */
    // "allowJs": true, 			/* 자바스크립트 파일 컴파일 허용 여부 */
    // "checkJs": true, 			/* .js 파일의 오류 검사 여부 */
    // "jsx": "preserve", 			/* JSX 코드 생성 설정: 'preserve', 'react-native', 혹은 'react'. */
    // "declaration": true, 		/* '.d.ts' 파일 생성 여부. */
    // "declarationMap": true, 		/* 각 '.d.ts' 파일의 소스맵 생성 여부. */
    // "sourceMap": true, 			/* '.map' 파일 생성 여부. */
    // "outFile": "./", 			/* 단일 파일로 합쳐서 출력합니다. */
    // "outDir": "./", 				/* 해당 디렉토리로 결과 구조를 보냅니다. */
    // "rootDir": "./", 			/* 입력 파일의 루트 디렉토리(rootDir) 설정으로 --outDir로 결과 디렉토리 구조를 조작할 때 사용됩니다. */
    // "composite": true, 			/* 프로젝트 컴파일 여부 */
    // "tsBuildInfoFile": "./", 	/* 증분 컴파일 정보를 저장할 파일 */
    // "removeComments": true, 		/* 주석 삭제 여부 */
    // "noEmit": true, 				/* 결과 파일 내보낼지 여부 */
    // "importHelpers": true, 		/* 'tslib'에서 헬퍼를 가져올 지 여부 */
    // "downlevelIteration": true, 	/* 타겟이 'ES5', 'ES3'일 때에도 'for-of', spread 그리고 destructuring 문법 모두 지원 */
    // "isolatedModules": true, 	/* 각 파일을 분리된 모듈로 트랜스파일 ('ts.transpileModule'과 비슷합니다). */
    /* 엄격한 타입-확인 옵션 */
    "strict": true, 					/* 모든 엄격한 타입-체킹 옵션 활성화 여부 */
    // "noImplicitAny": true, 			/* 'any' 타입으로 구현된 표현식 혹은 정의 에러처리 여부 */
    // "strictNullChecks": true, 		/* 엄격한 null 확인 여부 */
    // "strictFunctionTypes": true, 	/* 함수 타입에 대한 엄격한 확인 여부 */
    // "strictBindCallApply": true, 	/* 함수에 엄격한 'bind', 'call' 그리고 'apply' 메소드 사용 여부 */
    // "strictPropertyInitialization": true, 	/* 클래스의 값 초기화에 엄격한 확인 여부 */
    // "noImplicitThis": true, 		/* 'any' 타입으로 구현된 'this' 표현식 에러처리 여부 */
    // "alwaysStrict": true,		/* strict mode로 분석하고 모든 소스 파일에 "use strict"를 추가할 지 여부 */
    /* 추가적인 확인 */
    // "noUnusedLocals": true, 		/* 사용되지 않은 지역 변수에 대한 에러보고 여부 */
    // "noUnusedParameters": true, 	/* 사용되지 않은 파라미터에 대한 에러보고 여부 */
    // "noImplicitReturns": true, 	/* 함수에서 코드의 모든 경로가 값을 반환하지 않을 시 에러보고 여부 */
    // "noFallthroughCasesInSwitch": true, 	/* switch문에서 fallthrough 케이스에 대한 에러보고 여부 */
    /* 모듈 해석 옵션 */
    // "moduleResolution": "node", 	/* 모듈 해석 방법 설정: 'node' (Node.js) 혹은 'classic' (TypeScript pre-1.6). */
    // "baseUrl": "./", 		/* non-absolute한 모듈 이름을 처리할 기준 디렉토리 */
    // "paths": {}, 			/* 'baseUrl'를 기준으로 불러올 모듈의 위치를 재지정하는 엔트리 시리즈 */
    // "rootDirs": [], 			/* 결합된 컨텐츠가 런타임에서의 프로젝트 구조를 나타내는 루트 폴더들의 목록 */
    // "typeRoots": [], 		/* 타입 정의를 포함할 폴더 목록, 설정 안 할 시 기본적으로 ./node_modules/@types로 설정 */
    // "types": [], 			/* 컴파일중 포함될 타입 정의 파일 목록 */
    // "allowSyntheticDefaultImports": true, 	/* default export이 아닌 모듈에서도 default import가 가능하게 할 지 여부, 해당 설정은 코드 추출에 영향은 주지 않고, 타입확인에만 영향을 줍니다. */
    "esModuleInterop": true, 			/* 모든 imports에 대한 namespace 생성을 통해 CommonJS와 ES Modules 간의 상호 운용성이 생기게할 지 여부, 'allowSyntheticDefaultImports'를 암시적으로 승인합니다. */
    // "preserveSymlinks": true, 		/* symlik의 실제 경로를 처리하지 않을 지 여부 */
    // "allowUmdGlobalAccess": true, 	/* UMD 전역을 모듈에서 접근할 수 있는 지 여부 */
    /* 소스 맵 옵션 */
    // "sourceRoot": "", 		/* 소스 위치 대신 디버거가 알아야 할 TypeScript 파일이 위치할 곳 */
    // "mapRoot": "", 			/* 생성된 위치 대신 디버거가 알아야 할 맵 파일이 위치할 곳 */
    // "inlineSourceMap": true, /* 분리된 파일을 가지고 있는 대신, 단일 파일을 소스 맵과 가지고 있을 지 여부 */
    // "inlineSources": true, 	/* 소스맵과 나란히 소스를 단일 파일로 내보낼 지 여부, '--inlineSourceMap' 혹은 '--sourceMap'가 설정되어 있어야 한다. */
    /* 실험적 옵션 */
    // "experimentalDecorators": true, 	/* ES7의 decorators에 대한 실험적 지원 여부 */
    // "emitDecoratorMetadata": true, 	/* decorator를 위한 타입 메타데이터를 내보내는 것에 대한 실험적 지원 여부 */
    /* 추가적 옵션 */
    "skipLibCheck": true, 	/* 정의 파일의 타입 확인을 건너 뛸 지 여부 */
    "forceConsistentCasingInFileNames": true 	/* 같은 파일에 대한 일관되지 않은 참조를 허용하지 않을 지 여부 */
    }
}

출처: https://geonlee.tistory.com/214 [빠리의 택시 운전사]