[TypeScript] tsconfig.json 옵션 살펴보기

tsconfig.json

유데미 강의를 통해 tsconfig.json 파일에 있는 옵션들에 대해 공부해보았고 이를 정리해보았다.

아래 코드에 적힌 옵션들에 대한 설명이다.

{
  "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  /* 동일한 파일에 대한 일관되지 않은 케이스 참조를 허용하지 않음 */
    
  }
}

 

 

 

관찰 모드 (watch mode) 사용하기

• 관찰 모드를 사용하면 타입스크립트가 파일을 관찰하고 파일에 변경 사항이 있을 때마다 다시 컴파일 하게 된다
• tsc app.ts —watch
• tsc app.ts -w
• watch 모드로 진입한다 (ctrl + c 하면 멈춤)

 

 

전체 프로젝트 컴파일 / 다수의 파일 컴파일

• 파일이 여러 개인 경우 관찰 모드로 진입하여 tsc를 입력하는 식으로 컴파일 작업을 수행하면 된다.
• 파일을 지정하지 않아도 관찰 모드로 전체 프로젝트 폴더를 확인하고 모든 타입스크립트 파일을 다시 컴파일할 수 있다
• tsc —init : 특정 파일을 지정하지 않고 수행 ⇒ 이 명령어는 타입스크립트 프로젝트라고 처음에 지정하면서 한 번만 실행하면 된다
  • 이 명령어가 실행되는 폴더의 모든 항목을 알려주는 역할을 한다
  • 올바른 폴더 위치에 있는 것이 중요
  • tsconfig.json 파일이 생성된다
• 이후에는 특정 파일을 지정하지 않더라도 tsc를 입력하여 실행할 수 있게 된다 (자동으로 js 파일 생성)
• tsc -w ⇒ 모든 타입스크립트 파일에 관찰 모드 적용된다

 

 

파일 포함 및 제외하기

tsconfig.json

• 프로젝트 관리에 중요한 파일 ⇒ 파일들을 어떻게 컴파일해야 하는지 타입스크립트에게 알려준다
• “compileOptions” : 컴파일러의 동작 방식을 구성할 수 있다
• 옵션 추가 가능 ⇒ 컴파일러나 컴파일 단계 동작에 영향을 미치지 않고 대신 컴파일러가 이 프로젝트에서 작동하는 방식
• “exclude” : [ ] : 전체 프로젝트에 대해 tsc를 실행할 때 컴파일시 포함되어서는 안 되는 파일을 제외시킨다
  • 자주 사용하는 설정은 node_modules를 제외시키는 것이다 = node_modules 폴더에 있는 모든 타입스크립트 파일들을 컴파일 하지 않겠다는 의미
  • exlcude 옵션을 아예 지정하지 않으면 node_modules는 기본 설정상 자동으로 제외된다 (굳이 안 써도 된다)

"exclude": [
    "*.dev.ts"
]
// .dev.ts 로 끝나는 모든 파일을 제외시킨다
// **/*.dev.ts : 모든 폴더에서 이와 같은 패턴의 파일을 제외시킨다

• “include”: [ ] : 컴파일 과정에 포함시킬 파일을 타입스크립트에 알려서 여기에 포함되지 않은 어떤 것도 컴파일 되지 않도록 한다
  • 기본적으로 exclude 된 파일들을 제외하고 include 된다
• “files”: [ ] : 개별 파일을 지정할 수 있다
  • 컴파일하고자 하는 개별 파일만 지정할 수 있다 (작은 프로젝트에서 유용)
  • 변경해서는 안 되는 다른 형식의 파일들을 지정하고자 한다면 유용하다
  • 실제로 자주 필요하지는 않다

 

컴파일 대상 설정하기

compilerOptions

• 타입스크립트 코드가 컴파일되는 방식을 관리한다
• 어떤 파일을 컴파일할지, 그리고 컴파일되는 파일이 타입스크립트로 어떻게 처리되어야 하는지를 설정할 수 있다

target

• 어떤 자바스크립트 버전을 대상으로 코드를 컴파일할 것인지 타입스크립트에게 알려준다
• 특정 브라우저에서 실행되는 자바스크립트로 코드를 컴파일한다
• 이 옵션을 설정하여 어떤 브라우저가 디컴파일된 코드를 지원하는지 정의한다
• es5 : 모든 유형의 코드가 컴파일되었다는 의미 (let, const가 포함되지 않음)
• 지정하지 않으면 타입스크립트는 번호가 없는 es만 컴파일하므로 이전 버전도 지원된다
• es6을 할당할 수도 있다

 

 

TypeScript 핵심 라이브러리 이해하기

lib

• dom으로 작업을 수행하는 항목들, 즉 기본 객체, 기능, 타입스크립트 노드를 지정하게 해주는 옵션
• 이 옵션이 설정이 안 되어 있으면 기본 설정은 자바스크립트의 target에 따라 달라진다
• 자바스크립트에서 전역적으로 사용 가능한 기능들을 타입스크립트에서도 사용 가능하게 해주는 것
• 모든 dom API도 사용 가능하도록 적용

"lib" : [
    "dom",
    "es6",
    "dom.iterable",
    "scipthost"
]
// 주석처리를 해제하면 직접 배열 안에 설정해야 한다
// 위의 기능들을 추가하면 자바스크립트의 핵심 기능들을 모두 사용할 수 있다 (target을 es6으로 설정했을 때의 기본 설정과 같으므로 주석처리해도 무관)
// 공식 문서에서 확인 가능

 

 

추가 구성 및 컴파일 옵션

allowJs

• 타입스크립트가 자바스크립트 파일을 컴파일 할 수 있도록 해준다
• 파일이 .ts로 끝나지 않더라도 타입스크립트는 컴파일 할 수 있다

checkJS

• 타입스크립트는 컴파일을 수행하지 않더라도 구문을 검사하고 잠재적 에러를 보고해준다.
• 이 옵션은 타입스크립트를 사용하지 않고 일부 기능의 장점을 취하고자 할 때 유용

---

⇒ 타입스크립트를 전혀 사용하지 않는 프로젝트나 타입스크립트 파일과 바닐라 자바스크립트 파일을 함께 사용하면서 바닐라 자바스크립트 파일도 함께 검사하고 싶은 경우에 사용 가능하다.

 

 

 

소스 맵 작업하기

sourceMap

• 디버깅 작업과 개발에 유용
• Sources 탭에서 자바스크립트 파일을 살펴보면 인간이 충분히 읽을 수 있다
• 복잡한 방식의 코드가 있어서 타입스크립트 코드와 디컴파일된 자바스크립트 코드를 디버깅해야 한다면 sourceMap 옵션이 있는 자바스크립트 파일이 아닌 타입스크립트 파일이 있다면 좋다
• 값을 true로 설정하고 tsc 커맨드를 다시 실행하면 .js.map 파일들이 생성된다
  • 입력 파일에 자바스크립트 파일을 연결하는 최신 브라우저와 개발자 도구 간의 다리
  • Sources 탭에서 자바스크립트 파일뿐만 아니라 타입스크립트 파일도 볼 수 있다
• 디버깅 프로세스를 한 단계 업그레이드해준다.

 

 

rootDir 및 outDir

rootDir

• 기본적으로 루트에 있는 프로젝트 폴더에는 파일을 넣지 않는다
• “rootDir”: “./src” : 로 설정하면 루트에 있지 않은 타입스크립트 파일이 폴더에 있더라도 파일은 출력으로 포함되지 않는다

outDir

• 이 옵션을 설정하면 생성된 파일이 저장되는 위치를 타입스크립트 컴파일러에 알릴 수 있다
• dist 폴더는 모든 출력값을 보관하는 작업을 수행한다 (모든 자바스크립트 파일과 src 폴더에 모든 타입스크립트 파일이 보관된다)
• 이를 dist로 설정할 수도 있다
• “outDir” : “./dist”
• src에서 하위 폴더를 만들고 타입스크립트 파일을 만들고 tsc를 실행시키면 dist 폴더에 자동으로 복제된다

---

⇒ 모두 사용하여 입력 파일이 있는 위치와 출력 파일이 생성될 위치에 대해 명확하게 설명해야 한다

---

removeComments

• 타입스크립트 파일의 모든 주석이 컴파일된 자바스크립트에서는 제거된다
• 파일 크기를 줄이는 데 좋은 옵션이 될 수 있다

noEmit

• 자바스크립트 파일을 생성하지 않으려면 이 옵션을 추가하면 된다
• 규모가 큰 프로젝트에서는 이 값을 참(true)로 설정하여 출력 파일을 가져오지 않고도 타입스크립트 컴파일러가 파일을 검사하고 잠재적 에러를 보고하도록 할 수 있다

downlevelInteration

• 고급 기능
• 코드를 이전 버전의 자바스크립트로 컴파일하고 for 루프로 작업한 다음 컴파일이 제대로 작동하지 않는 경우가 있을 수도 있다
• 그럴 때 이 옵션을 설정하면 보다 정확하게 컴파일 할 수 있다
• 루프가 있고 생성된 코드가 해당 루프와 다르게 작동하는 경우에만 이 옵션을 사용해야 한다.

 

 

컴파일 오류 시 파일 방출 중지하기

noEmitOnError

• 기본값은 false
• 에러가 발생하더라도 타입스크립트는 원하든 원하지 않든 자바스크립트 파일을 생성한다
• 자바스크립트 파일 생성에 문제가 없고 에러가 발생하는 경우 이 값을 true로 설정하면 문제가 되는 파일이 다시 생성되지 않는다
• 이 옵션은 일반적으로 타입스크립트 파일에 에러가 있는 경우 자바스크립트 파일을 가져오고 싶지 않은 경우에 설정한다

 

 

Strict 컴파일

Strict 옵션들

• “strict”: true 를 통해 모든 strict 유형의 검사 옵션을 사용할 수 있다

noImplicitAny

• 더 나은 코드를 작성하는 데 도움이 되는 옵션
• 이 옵션은 코드에서 우리가 작업하고 있는 매개변수와 값을 명확히 할 수 있도록 해준다
• 타입스크립트는 적어도 호출하는 코드가 현재 지정된 타입과 함께 작동하는지 확인한다

srtickNullCheck

• 이 옵션을 false로 설정하면 null 값을 잠재적으로 가질 수 있는 값에 접근하고 작업하는 방식을 타입스크립트에게 매우 엄격하게 알려준다
• 타입스크립트는 html 파일을 살펴보지 않으므로 성공 여부를 판단할 수 없다
• 이는 dom 노드에 포인터를 반환하지 못하면 null을 반환한다
• true로 설정하면 에러를 파악하고 해결할 수 있게 한다

strictFunctionTypes

• 고급 설정
• 매개변수와 반환 값에 대해 함수가 어떻게 표시되는지 정의

StrictBindCallApply

• 결합하고 호출하고 적용하는 작업에 유용하다

 

 

코드 품질 옵션

noUnusedLocals, noUnusedParameters, noImplicitReturns

• 기본적으로 사용되지 않은 변수가 있으면 타입스크립트가 에러를 표시한다
• 잊어버릴 수도 있는 switch 문에 breack문을 입력하도록 한다
• 이 옵션을 키면 타입스크립트는 문제를 표시하는데 사용하지 않은 지역 변수나 전역 변수를 원치 않는다고 설정했기 때문
• 더 이상 필요하지 않은 함수에서 사용하지 않는 코드가 있다면 타입스크립트가 문제를 표시해주므로 사용하지 않는 코드를 제거할 수 있게 해주는 옵션이다
• 사용하지 않는 매개변수도 마찬가지
• 함수가 무언가를 반환하는 경우가 하나라도 있다면 모든 경우에 무언가를 반환하도록 해야 한다

 

 

---

더 자세한 내용은 공식 문서에서 찾아보면 될 듯 하다.

 

https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

Documentation - What is a tsconfig.json