TypeScript: tsconfig 알아보기

프로젝트 디렉토리에 tsconfig.json 파일을 생성하면 TypeScript 프로젝트의 루트로 사용할 수 있다. tsconfig.json 파일은 프로젝트를 컴파일하는 데 필요한 루트 파일과 컴파일러 옵션을 지정한다.

이번 글에서는 tsconfig에서 사용할 수 있는 몇몇 옵션들을 알아보고자 한다.

{
  "compilerOptions": {
    /* Language and Environment */
    // 최신 브라우저에서만 돌아가는 앱인 경우 "es6"를 적용하여 컴파일된 코드를 보다 간결하게 만들 수 있다.(const, let 등의 문법 적용)
    "target": "es6",
    // 아래의 lib 옵션은 target 옵션을 "es6"으로 설정했을 때 기본적으로 적용되는 설정들이다.
	// (lib옵션이 없을 때와 동일한 효과)
    // lib 옵션이 없다면 지정된 target 옵션 값에 따라 자동으로 기본 설정이 적용된다. 
    // 빈 배열을 값으로 가진 lib 옵션을 활성화할 경우 옵션이 초기회되기 때문에 컴파일 오류가 발생할 수 있으니 주의.
    "lib": [
      "DOM", // 모든 DOM API를 사용할 수 있게 해줌.
      "es6",
      "DOM.Iterable",
      "ScriptHost"
    ],
      
    /* Modules */
    // rootDir 옵션으로 ts를 작성하는 위치(컴파일을 진행할 폴더)를 지정할 수 있다.
    // (outDir 옵션과 함께 사용할 수 있음)
    // rootDir 옵션이 없는 상태에서 src 폴더와 dist 폴더로 나누어 작업하는 경우
    // 컴파일 대상을 전체 프로젝트로 간주하기 때문에 src폴더가 dist 폴더에 포함되는 불상사가 생길 수 있음
    "rootDir": "./src",
    // allowJs 옵션은 ts가 js파일도 컴파일 할 수 있도록 해준다.
    "allowJs": true,
      
    /* JavaScript Support */
    // checkJs 옵션은 컴파일을 수행하지 않더라도 구문을 검사하고 잠재적 에러를 보고해준다.
    // 이는 ts를 사용하지 않고 일부 기능의 장점만 취하고자 할 때 사용한다.
    //   -> ts는 js에서 효과적으로 사용할 수 있는 any 타입만 허용하는데 이 옵션이 그와 같이 설정해줌.
    // ts만 사용하는 프로젝트의 경우 자동으로 컴파일해주기 때문에 필요 없는 옵션이다.
    //   -> js만 사용하거나 ts와 js를 혼용하여 사용하는 경우에 사용할 수 있다.
    "checkJs": true,
      
    /* Emit */
    // sourceMap 옵션을 true로 설정하면 컴파일시 js파일과 함께 js.map파일도 함께 생성된다.
    // 이는 개발자 도구의 source 탭에서 ts 파일도 확인할 수 있도록 해주기 때문에 디버깅을 훨씬 수월하게 해줄 수 있다.
    // (ts 파일에서 break point 지정 가능)
    "sourceMap": true,
    // outDir 옵션을 사용하면 생성된 파일이 저장되는 위치를 ts 컴파일러에 알릴 수 있다.
    // 이 옵션을 설정하면 js파일이 src 폴더가 아닌 dist 폴더에 있다는 것을 알 수 있다.
    // 개별 파일 뿐 아니라 폴더 안에서 ts파일을 작성하더라도 dist 폴더 안에 똑같은 구조로 만들어준다.
    //   -> src/analytics/analytics.ts  =>  dist/analytics/analytics.js
    "outDir": "./dist",
    // 컴파일시 ts파일에 포함된 주석을 제외하고 컴파일한다.
    // 파일의 크기를 줄이는데 도움이 된다.
    "removeComments": true,
    // noEmit 옵션을 true로 설정하면 js파일을 생성하지 않는다.
    // 규모가 큰 프로젝트에서 출력파일을 가져오지 않고도 컴파일러가 파일을 검사하고 잠재적 에러를 보고하도록 할 수 있음.
    "noEmit": true,
    // downlevelIteration 옵션을 true로 설정하면 컴파일시 for 등의 루프가 의도대로 작동하지 않는 경우 설정해줄 수 있다.
    // 컴파일시 더 상세한 코드로 출력해주기 때문에 항상 true로 적용해 두는 것은 비효율적일 수 있다.
    "downlevelIteration": true,
    // noEmitOnError옵션을 true로 설정하면 컴파일시 에러가 발생하면 js파일을 생성하지 않는다.
    "noEmitOnError": true,
      
    /* Type Checking */
    // strict 옵션은 모든 strict Type Checking 옵션을 활성화한다.
    // (strict 옵션 하나만 true로 변경하면 모두 true로 설정한 효과)
    "strict": true,
    // noImplicitAny 옵션은 매개변수(parameter) 값을 명확히 할 수 있도록 해줌. (any 비허용)
    // 변수의 경우는 any로 설정되어도 오류가 발생하지 않는데 이는 코드의 흐름에 따라 할당된 값을 토대로 추적될 수 있기 때문이다.
    "noImplicitAny": true,
    // strictNullChecks 옵션은 null 값을 잠재적으로 가질 수 있는 값에 접근하는 방식을 엄격하게 알려줄 수 있다.
    // !(느낌표)나 ?(물음표), if문 설정 등을 사용하여 에러를 해결할 수 있다.
    // 만약 이 옵션을 false로 해두고 작업하면 컴파일 에러는 피할 수 있지만 참조되는 값이 null인 경우 런타임에서 오류가 발생한다.
    "strictNullChecks": true,
    // strictFunctionTypes 옵션은 함수에 설정된 매개변수와 리턴 값의 타입들이 상충되지 않는지 검사해준다.
    //   -> 매개변수가 string인 함수 타입을 설정하고 매개변수가 (string | number)인 함수를 할당할 수 없다.
    // 클래스나 상속을 사용하여 작업한다면 불필요한 옵션이다.
    "strictFunctionTypes": true,
    // strictBindCallApply 옵션은 bind, call, apply 메서드를 사용하는 경우 유용할 수 있다.
    // 매개변수(parameter)가 필요한 함수를 구성하지 않고 바로 전달하는 경우 에러 발생
    //    -> clickHandler는 string 타입 매개변수 필요; -> (button.addEventListener('click', clickHandler.bind(null))) 에러 발생
    //    -> 이 때 두 번째 인수를 전달한다면 에러가 사라지게 된다.
    //    -> button.addEventListener('click', clickHandler.bind(null, 'string 메시지'))
    "strictBindCallApply": true,
    // alwaysStrict 옵션은 컴파일시 js파일에 'use strict'를 추가하여 strict모드를 사용하도록 해준다.
    "alwaysStrict": true,
    // noUnusedLocals 옵션은 사용되지 않은 지역변수가 선언되는 경우 에러를 표시한다.
    //    -> function a(){let username = 'max'} // 함수내에서 사용되지 않는 변수 선언 -> 에러
    // ts 파일의 가장 바깥 영역에 사용하지 않는 변수를 설정하는 것은 에러를 표시하지 않는다. -> 다른 ts파일에서 참조될 수도 있기 때문.
    "noUnusedLocals": true,
    // noUnusedParameters 옵션은 사용되지 않은 매개변수가 존재하는 경우 에러를 표시한다.
    "noUnusedParameters": true,
    // noImplicitReturns 옵션은 특정 조건에서는 리턴하고 다른 경우에는 리턴하지 않는 함수가 있는 경우 에러를 나타낸다.
    // function fun(n1){if(n1 === 1) return n1;}  -> n1이 1인 경우에는 리턴하고 다른 경우에는 리턴하지 않으므로 에러 발생
    // 즉, 모든 분기가 return 문으로 이어지지 않으면 에러
    // 어떤 경우에도 return 하지 않는 함수는 에러를 표시하지 않음.(ex. console.log만 실행하는 함수인 경우)
    "noImplicitReturns": true,
  },
    
  // 전체 프로젝트에 대해 tsc를 실행할 때 컴파일시 제외할 항목
  "exclude": [
    "**/*.dev.ts", // 모든 폴더에서 .dev.ts로 끝나는 모든 파일을 컴파일 제외시킨다
    "node_modules" // exclude 옵션이 없다면 자동으로 컴파일 제외 처리 되지만 있다면 반드시 node_modules 폴더를 포함시킨다.
  ],
  // 컴파일 할 항목을 지정해줌. 이외의 항목은 컴파일 되지 않는다.
  // exclude 옵션과 include 옵션이 같이 있다면 include 옵션에 포한된 항목 중에 exclude에 포함된 항목을 제외하고 컴파일된다.
  // (include - exclude)
  "include": [],
  // 컴파일하고자 하는 개별 파일만(폴더x) 지정. 소규모 프로젝트에서 사용
  "files": []
}