Typescript

tsconfig.json option 정리

하루 2022. 10. 3. 13:39 
{
  "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 전역을 모듈에서 접근할 수 있는 지 여부 */
    "resolveJsonModule": true,             /* 노드 프로젝트에서 일반적으로 사용되는 확장자가 '.json'인 모듈을 가져올 수 있습니다. 
                                            여기에는 static JSON 형태를 기반으로 import를 위한 type 생성이 포함됩니다.
                                            TypeScript는 기본적으로 JSON 파일 확인을 지원하지 않습니다./*
 
    /* 소스 맵 옵션 */
    "sourceRoot": "",                      /* 소스 위치 대신 디버거가 알아야 할 TypeScript 파일이 위치할 곳 */;
    "mapRoot": "",                         /* 생성된 위치 대신 디버거가 알아야 할 맵 파일이 위치할 곳 */
    "inlineSourceMap": true,               /* 분리된 파일을 가지고 있는 대신, 단일 파일을 소스 맵과 가지고 있을 지 여부 */
    "inlineSources": true,                 /* 소스맵과 나란히 소스를 단일 파일로 내보낼 지 여부, '--inlineSourceMap' 혹은 '--sourceMap'가 설정되어 있어야 한다. */
 
    /* 실험적 옵션 */
    "experimentalDecorators": true,        /* ES7의 decorators에 대한 실험적 지원 여부 */
    "emitDecoratorMetadata": true,         /* decorator를 위한 타입 메타데이터를 내보내는 것에 대한 실험적 지원 여부 */
 
    /* 추가적 옵션 */
    "skipLibCheck": true,                     /* 정의 파일의 타입 확인을 건너 뛸 지 여부 */
    "forceConsistentCasingInFileNames": true  /* 같은 파일에 대한 일관되지 않은 참조를 허용하지 않을 지 여부 */
  }
}

 

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es5",
    "moduleResolution": "node",
    "outDir": "dist",
    "baseUrl": ".",
    "sourceMap": true,
    "downlevelIteration": true,
    "noImplicitAny": false,
    "paths": { "*": ["node_modules/*"] },
  },
  "include": ["src/**/*"],
}

 

  • compilerOptions 항목은 tsc 명령 형식에서 옵션을 나타낸다.
  • include 항목은 대상 파일 목록을 나타낸다.
    • src/**/* 은 src 디렉터리와  src의 하위 디렉터리에 있는 모든 파일을 컴파일 대상으로 포함한다는 뜻

module

tsconfig.ts 파일에서 compilerOptions 항목에서 module 키는 동작 대상 플랫폼이 웹 브라우저인지, 노드제이에스인지를 구분하여 키값에 따른 모듈 방식으로 컴파일하려는 목적으로 설정한다.

{
  "compilerOptions": {
    "module": "commonjs",
  },
}

타입스크립트 소스코드가 컴파일되어 만들어진 자바스크립트 코드는 웹 브라우저와 노드제이에스 양쪽에서 모두 동작해야 한다.

하지만 웹 브라우저와 노드제이에스는 물리적으로 동작하는 방식이 달라서 자바스크립트 코드도 양쪽에서 각각 다르게 동작한다.

 

자바스크립트가 동작하는 방식

  • 웹 브라우저: AMD(asynchronous module definition) 방식 (amd)
  • 노드제이에스: CommonJS 방식 (commonjs)

 

moduleResoloution

어떤 모듈로 동작을 해석할 것인지 설정해준다.

모듈키의 값이 commonjs 라면 노드제이에스에서 동작하므로 node가 되고, amd 라면 웹 브라우저에서 동작하므로 classic 으로 설정한다.

{
  "compilerOptions": {
    "module": "commonjs",
    "moduleResolution": "node",
  },
}
{
  "compilerOptions": {
    "module": "amd",
    "moduleResolution": "classic",
  },
}

 

target

트랜스파일할 대상 자바스크립트의 버전을 설정한다.

대부분 es5를 키값으로 설정한다.

소스코드를 최신 문법으로 작성하더라도 es5로 변환해준다.

만약 최신 버전의 노드제이에스를 사용한다면 es6을 설정할 수 있다.

{
  "compilerOptions": {
    "target": "es5",
  },
}

 

baseUrl / outDir

baseUrl과 outDir 키에는 트랜스파일된 자바스크립트 파일을 저장하는 디렉터리를 설정한다.

{
  "compilerOptions": {
    "outDir": "dist",
    "baseUrl": ".",
  },
}

tsc 키워드(ts→js 컴파일)는 기본적으로 tsconfig.json 파일이 있는 디렉터리에서 실행된다.

따라서 현재 디렉터리를 의미하는 "." 로 baseUrl 키 값을 설정하는 것이 일반적이다.

 

outDir는 baseUrl 설정값을 기준으로 했을 때 하위 디렉터리의 이름이다. 해당 디렉터리 이름으로 결과 구조를 보낸다.

dist 라는 값을 설정했으므로 빌드된 결과가 dist 디렉터리에 만들어진다.

 

paths

소스파일의 import 문에서 from 부분을 해석할 때 찾아야 하는 디렉터리를 설정한다.

{
  "compilerOptions": {
    "paths": { "*": ["node_modules/*"] },
  },
}

import 문이 찾아와야 하는 소스가 외부 패키지라면 node_modules 디렉터리에서 찾아야 하므로 키 값에 node_modules/* 도 포함한 것이다.

 

esModuleInterop

모든 imports에 대한 namespace 생성을 통해 CommonJS 와 ES Modules 간의 상호 운용성이 생기게 할 지 에 관한 여부를 묻는 키 이다.

 

오픈소스 자바스크립트 라이브러리 중 AMD(웹 브라우저) 방식을 전제로 해서 구현된 라이브러리의 경우 CommonJS(노드제이에스) 방식으로 동작하는 타입스크립트 코드에 혼란을 줄 수 있다.

따라서 이러한 패키지가 동작하려면 esModuleInterop 값을 반드시 true 로 설정해주어야 한다.

 

sourceMap

소스맵 파일 생성 여부를 작성한다.

sourceMap: true 일 경우 트랜스파일 디렉터리에는 .js 파일 이외에도 .js.map 파일이 만들어진다.

소스맵 파일은 주로 디버깅할 때 사용되며, 변환된 자바스크립트 코드가 타입스크립트 코드의 어디에 해당하는지 알려준다.

 

downlevelIteration

타입스크립트 구문 중 생성기 구문이 정상적으로 작동하려면 downlevelIteration: true 여야한다.

 

noImplicitAny

타입스크립트 컴파일러는 기본적으로 매개변수에 타입을 명시하지 않은 코드일 경우 f(a: any, b: any) 처럼 암시적으로 any 타입을 설정한 것으로 간주한다.

이런 형태의 코드는 타입스크립트 언어의 장점을 사용하는 것이아니므로 다음처럼 코드에 문제가 있음을 알려준다.

'a' 매개 변수에는 암시적으로 'any' 형식이 포함됩니다.

 

이 때 noImplicitAny: false 로 설정 시 타입을 지정하지 않더라도 문제로 인식하지 않는다.

출처

 

Do it! 타입스크립트 프로그래밍 : 네이버 도서

네이버 도서 상세정보를 제공합니다.

search.shopping.naver.com