# tsconfig.json By [Primrose](https://paragraph.com/@primrose) · 2022-11-28 --- tsconfig.json ============= 디렉토리에 tsconfig.json 파일이 있다면 해당 디렉토리가 Typescript 프로젝트의 루트가 된다. 해당 파일은 프로젝트를 컴파일 하는데 필요한 루트 파일과 컴파일러 옵션을 지정할 수 있다. 해당 파일은 Typescript를 이용한 프로젝트를 진행할 때 상당히 중요하다. 그 옵션들과 용도에 대해서 자세히 알아보자. files ----- 타입스크립트 변환 명령어를 입력할 때마다 대상 파일의 경로를 지정하지 않고 설정파일에 미리 정의할 수 있다. { "files": ["app.ts", "./utils/math.ts"] } include ------- `files`와 같이 파일을 개별로 지정하지 않고 include 옵션으로 변환할 폴더를 지정할 수 있다. { "include": ["src/**/*"] } > TIP > > 와일드카드 패턴 > > * `*`: 해당 디렉토리의 모든 파일 검색 > > * `?` : 해당 디렉토리 안에 파일의 이름 중 한 글자라도 맞으면 해당 > > * `**` : 하위 디렉토리를 재귀적으로 접근(하위 디렉토리의 하위 디렉토리가 존재하는 경우 반복해서 접근) > exclude ------- `include`와 반대되는 속성으로 변환하지 않을 폴더 경로를 지정 { "exclude": ["node_modules"] } 만약 설정하지 않으면 기본적으로 `node_modules`나 `bower_components`같은 폴더를 제외 > TIP > > 컴파일 대상 경로를 정의하는 속성의 우선순위 > > `files` > `include` = `exclude` ### @types 라이브러리와 typeRoots 타입스크립트 설정 파일은 기본적으로 `node_modules`를 제외하지만 써드 파티 라이브러리의 타입을 정의해놓는 `@types` 폴더는 컴파일에 포함한다. └─ node_modules ├─ @types => 컴파일에 포함 ├─ lodash => 컴파일에서 제외 그런데 여기서 만약 `@types`의 기본 경로를 변경하고 싶다면 아래와 같이 지정할 수 있다. 예를 들어서 프로젝트의 루트 디렉터리에 `@types/` 디렉터리를 만들었다면 { "compilerOptions": { "typeRoots" : ["node_modules/@types", "@types"] } } `include`에 이미 포함된 곳이라면 굳이 추가해줄 필요가 없다. 대부분이 잘못 알고 있는 것 중 하나가 프로젝트 내에서 type 파일을 만들게 되면 `typeRoots`에 추가해야 한다고 알고 있는데 include에 포함돼 있는 `.d.ts` 파일은 자동으로 typescript가 인식하므로 넣어줄 필요가 없다. extends ------- 특정 타입스크립트 설정 파일에서 다른 타입스크립트 설정의 내용을 가져와 추가할 수 있는 속성이다. // config/base.json { "compilerOptions": { "noImplicitAny": true } } 확장한 파일의 내용을 가져다가 덮어쓰거나 새로 정의할 수도 있다. target ------ 타입스크립트 파일을 컴파일 했을 때 빌드 디렉토리에 생성되는 자바스크립트의 버전을 의미힌다. 기본 값인 `es3`부터 `es5`, `es6` 등 가장 최신 버전인 `esnext`까지 있다. // tsconfig.json { "target": "esnext" } lib --- 타입스크립트 파일을 자바스크립트로 컴파일 할 때 포함될 라이브러리의 목록이다. 이 속성을 활용하는 가장 대표적인 사례는 `async`코드를 컴파일 할 때 `Promise`객체가 필요하므로 아래와 같은 설정을 해줘야 한다. // tsconfig.json { "lib": ["es2015", "dom", "dom.iterable"] } 여기서 `es2015`는 프로미스 객체를 타입스크립트에서 인식할 수 있게 필요한 속성이고, `dom` 관련 속성은 DOM API를 사용하는 경우 필요하다. outDir ------ `files`와 `include`를 통해서 선택된 파일들의 결과문이 저장되는 디렉터리를 `outDir`을 통해서 지정할 수 있다. 만약 타입 체크용으로 사용한다면 필요가 없다. `outFile`이라는 속성도 있는데, 이는 모든 파일을 하나의 파일로 합쳐서 출력할 경우 지정하는 파일명이다. `module`이 `none`, `system` 또는 `amd`가 아닌 경우 사용할 수 없다. noEmit ------ `noEmit`을 `true`로 설정하면 최종결과물이 나오지 않게 된다. 이를 통해서 단순 타임 체크용으로 사용할 것인지 아니면 `tsc`를 컴파일용으로 사용할 것인지 지정할 수 있게 된다. declaration ----------- `declaration`을 `true`로 설정하게 되면 해당 `.ts` 파일의 `.d.ts` 파일 또한 같이 출력물에 포함되게 된다. declaration 파일들만 따로 출력하게 하고 싶다면 `declarationDir`로 별도 지정해 줄 수 있다. emitDeclarationOnly ------------------- `emitDeclarationOnly`가 `true`라면 출력물에 declaration 파일만 나오게 된다. `noEmit`과 같이 사용할 수 없다. sourceMap --------- `sourceMap`을 `true`로 지정하면 출력물에 `.js.map` 이나 `.jsx.map` 파일을 포함된다. `inlineSourceMap`을 `true`을 지정하면 `.js` 파일 내부에 source map이 포한된다. 두 속성은 같이 사용할 수 없다. strict ------ `strict`를 `true`로 지정하면 typescript의 type 검사 옵션 중 `strict*` 관련된 모든 것을 `true`로 만들게 된다. `strictFunctionTypes`, `strictNullChecks` 등 이와 같은 속성들이 모두 `true`가 되고 필요에 따라서 선택하여 `false`로 지정하면 된다. 기본값은 `false`이며 `true`로 설정하기를 권장한다. isolatedModules --------------- `isolatedModules`을 `true`로 설정하면 프로젝트 내에 모든 각각의 소스코드 파일을 모듈로 만들기를 강제한다. 소스코드 파일에서 `import` 또는`export`를 사용하면 그 파일은 모듈이 된다. 만약 `import / export`를 하지 않으면 그 파일은 전역 공간으로 정의된다. `isolatedModules`가 `true`로 되어 있을 때 모듈로 소스코드를 작성하지 않으면 에러를 출력한다. 만약 `babel`과 같은 외부 도구를 사용한다면 `isolatedModules`를 `true`로 설정하는 것이 좋다. skipLibCheck ------------ 외부 라이브러리의 모듈을 참조할 경우 `.d.ts` 파일에 타입 정의가 잘못돼 있어서 오류가 나는 경우가 가끔씩 있다. 프로젝트 내부에는 문제가 없는데도 불구하고 외부 라이브러리의 타입 정의가 잘못돼서 오류가 나는 경우이다. 이럴 경우 `skipLibCheck`를 `true`로 지정하면 `tsc`에게 `.d.ts` 파일의 타입 검사를 생략시킬 수 있다. 이렇게 되면 내부 프로젝트에서 정의된 `.d.ts` 파일까지 검사가 생략돼서 문제가 발생하지 않냐고 할 수도 있다. 내부 프로젝트에서는 `.d.ts` 파일 정의를 하지 않으면 된다. `.d.ts`은 내부용이 아니라 외부용으로 사용되는 게 일반적이다. 일반적인 typescript 프로젝트에서는 type 정의를 `.ts` 파일에서 하고 `export` 하고 `import` 해서 사용하기를 권장한다. 요약 -- { "compilerOptions": { /* 기본 옵션 * ------------------------------------------------------------------------------------------------------------------------------------------------ */ // "incremental": true, /* 증분 컴파일 활성화 */ "target": "es5", /* ECMAScript 목표 버전 설정: 'ES3'(기본), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */ "module": "esnext", /* 생성될 모듈 코드 설정: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */ "lib": ["dom", "dom.iterable", "esnext"], /* 컴파일 과정에 사용될 라이브러리 파일 설정 */ "allowJs": true, /* JavaScript 파일 컴파일 허용 */ // "checkJs": true, /* .js 파일 오류 리포트 설정 */ "jsx": "react", /* 생성될 JSX 코드 설정: 'preserve', 'react-native', or 'react'. */ // "declaration": true, /* '.d.ts' 파일 생성 설정 */ // "declarationMap": true, /* 해당하는 각 '.d.ts'파일에 대한 소스 맵 생성 */ // "sourceMap": true, /* 소스맵 '.map' 파일 생성 설정 */ // "outFile": "./", /* 복수 파일을 묶어 하나의 파일로 출력 설정 */ // "outDir": "./dist", /* 출력될 디렉토리 설정 */ // "rootDir": "./", /* 입력 파일들의 루트 디렉토리 설정. --outDir 옵션을 사용해 출력 디렉토리 설정이 가능 */ // "composite": true, /* 프로젝트 컴파일 활성화 */ // "tsBuildInfoFile": "./", /* 증분 컴파일 정보를 저장할 파일 지정 */ // "removeComments": true, /* 출력 시, 주석 제거 설정 */ "noEmit": true, /* 출력 방출(emit) 유무 설정 */ // "importHelpers": true, /* 'tslib'로부터 헬퍼를 호출할 지 설정 */ // "downlevelIteration": true, /* 'ES5' 혹은 'ES3' 타겟 설정 시 Iterables '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, /* 엄격모드에서 구문 분석 후, 각 소스 파일에 "use strict" 코드를 출력 */ /* 추가 검사 옵션 * ------------------------------------------------------------------------------------------------------------------------------------------------ */ // "noUnusedLocals": true, /* 사용되지 않은 로컬이 있을 경우, 오류로 보고 */ // "noUnusedParameters": true, /* 사용되지 않은 매개변수가 있을 경우, 오류로 보고 */ // "noImplicitReturns": true, /* 함수가 값을 반환하지 않을 경우, 오류로 보고 */ "noFallthroughCasesInSwitch": true, /* switch 문 오류 유형에 대한 오류 보고 */ // "noUncheckedIndexedAccess": true, /* 인덱스 시그니처 결과에 'undefined' 포함 */ /* 모듈 분석 옵션 * ------------------------------------------------------------------------------------------------------------------------------------------------ */ "moduleResolution": "node", /* 모듈 분석 방법 설정: 'node' (Node.js) 또는 'classic' (TypeScript pre-1.6). */ // "baseUrl": "./", /* 절대 경로 모듈이 아닌, 모듈이 기본적으로 위치한 디렉토리 설정 (예: './modules-name') */ // "paths": {}, /* 'baseUrl'을 기준으로 상대 위치로 가져오기를 다시 매핑하는 항목 설정 */ // "rootDirs": [], /* 런타임 시 프로젝트 구조를 나타내는 로트 디렉토리 목록 */ // "typeRoots": [], /* 유형 정의를 포함할 디렉토리 목록 */ // "types": [], /* 컴파일 시 포함될 유형 선언 파일 입력 */ "allowSyntheticDefaultImports": true, /* 기본 출력(default export)이 없는 모듈로부터 기본 호출을 허용 (이 코드는 단지 유형 검사만 수행) */ "esModuleInterop": true /* 모든 가져오기에 대한 네임스페이스 객체 생성을 통해 CommonJS와 ES 모듈 간의 상호 운용성을 제공. 'allowSyntheticDefaultImports' 암시 */ // "preserveSymlinks": true, /* symlinks 실제 경로로 결정하지 않음 */ // "allowUmdGlobalAccess": true, /* 모듈에서 UMD 글로벌에 접근 허용 */ /* 소스맵 옵션 * ------------------------------------------------------------------------------------------------------------------------------------------------ */ // "sourceRoot": "./", /* 디버거(debugger)가 소스 위치 대신 TypeScript 파일을 찾을 위치 설정 */ // "mapRoot": "./", /* 디버거가 생성된 위치 대신 맵 파일을 찾을 위치 설정 */ // "inlineSourceMap": true, /* 하나의 인라인 소스맵을 내보내도록 설정 */ // "inlineSources": true, /* 하나의 파일 안에 소스와 소스 코드를 함께 내보내도록 설정. '--inlineSourceMap' 또는 '--sourceMap' 설정이 필요 */ /* 실험적인 기능 옵션 * ------------------------------------------------------------------------------------------------------------------------------------------------ */ // "experimentalDecorators": true, /* ES7 데코레이터(decorators) 실험 기능 지원 설정 */ // "emitDecoratorMetadata": true, /* 데코레이터를 위한 유형 메타데이터 방출 실험 기능 지원 설정 */ /* 고급 옵션 * ------------------------------------------------------------------------------------------------------------------------------------------------ */ "skipLibCheck": true, /* 선언 파일 유형 검사 스킵 */ "forceConsistentCasingInFileNames": true /* 동일한 파일에 대한 일관되지 않은 케이스 참조를 허용하지 않음 */ } } Sources… -------- [https://velog.io/@sooran/tsconfig.json-%EC%A0%9C%EB%8C%80%EB%A1%9C-%EC%95%8C%EA%B3%A0-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0](https://velog.io/@sooran/tsconfig.json-%EC%A0%9C%EB%8C%80%EB%A1%9C-%EC%95%8C%EA%B3%A0-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0) [https://yamoo9.gitbook.io/typescript/cli-env/tsconfig](https://yamoo9.gitbook.io/typescript/cli-env/tsconfig) [https://joshua1988.github.io/ts/config/types.html#types-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC%EB%9E%80](https://joshua1988.github.io/ts/config/types.html#types-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC%EB%9E%80) --- *Originally published on [Primrose](https://paragraph.com/@primrose/tsconfig-json)*