Compliation Contenxt

ts 파일들을 묶어서 하나의 그룹으로 묶고, 이 묶음에 필요한 설정을 추가하여 ts 파일을 js로 변환하는 작업을 컴파일이라 한다. 이 변환 작업에 필요한 세부 정보들은 tsconfig.json 이라는 설정 파일에 저장된다.

이 설정 파일에는 변환 작업의 대상이 되는 파일 목록 뿐만 아니라, js로 변환할 때 적용되는 컴파일 옵션들도 정의되어 있다. 이때, 이러한 모든 정보를 통틀어서 Compliation Contenxt라고 부르며, 이는 변환 작업을 조작하고 제어하는 데에 필요한 정보들을 포함한다.

Complitation Context의 설정에 따라서 컴파일의 결과물도 달라지기 때문에 이를 이해하는 것은 매우 중요하고, 읽고 설정할 수 있는 것도 중요하다.

http://json.schemastore.org/tsconfig 에서 tsconfig.json 파일의 전체 구조를 확인할 수 있다.
버전이 올라갈 수록 관련된 설정이 많아지기 때문에 양은 계속 늘어가고 있다.

이 파일의 최상위 Definition (정의) 프로퍼티에서, 중요한 것만 몇가지 뽑아보았다.

• compileOnSave
• extends
• compileOptions // (컴파일에 대한 세부 설정이 들어있기에 매우 많다)
• files
• include
• exclude
• references

---

1. compileOnSave

ts 프로젝트를 save하면 자동으로 컴파일하는 것을 활성화 시키는 옵션이다. default는 false이다. type을 true로 설정하면 이를 활성화 시킨다. 하지만 VS Code와 같은 IDE editor에서 save를 인지해서 컴파일시키겠다는 연결점이 되어있기에 아무 곳에서나 되는 것은 아니다.

2. extends

상속을 받을 때 사용하는 키워드이다. tsconfig 파일도 다른 파일의 상속을 받고, 그 안에 무엇인가 추가를 해서 설정하는 방법이 있다.

"extends" : "./base.json", 처럼 문자열로, 상속하는 파일의 경로를 문자열로 입력한다.

github의 tsconfig/bases 에서는 기본적으로 추천되는 base extends파일이 공개되어있다.
npm i --save-dev @tsconfig/deno 로 설치할 수 있고, json파일에 extends 키워드에 "@tsconfig/deno/tsconfig.json" 이렇게 문자열로 작성한다. 아직은 많이 사용하는 추세는 아니지만, 앞으로 늘어날 것으로 예측된다.

3. compileOptions ★★★★★

이 옵션에는 수많은 세부 옵션이 있다. 그중에서 먼저 types와 typeRoots를 살펴보자.

• types
  프로젝트에 필요한 타입 선언 파일을 지정하는데 사용된다. 타입 선언 파일은 주로 외부 라이브러리나 모듈의 타입 정보를 ts에 제공하는 역할을 한다. 이 옵션을 사용하여 직접 타입 선언 파일을 참조할 수 있다.
  예를 들어, 만약 프로젝트에서 'lodash' 라이브러리의 타입 정보를 사용하려면, types 옵션에 "lodash"를 추가하여 해당 라이브러리의 타입을 프로젝트에서 사용할 수 있게 할 수 있다.

• typeRoots
  타입 선언 파일을 찾을 기본 디렉토리의 경로를 설정한다. 이 옵션을 사용하여 타입 선언 파일이 위치한 디렉토리를 지정하면 컴파일러는 해당 디렉토리를 검색하여 타입 선언 파일을 찾게 된다. 기본적으로 ts는 node_modules/@types 디렉토리에서 타입 선언 파일을 찾는다. 하지만 경우에 따라 프로젝트 내부의 특정 디렉토리나 외부의 커스텀 디렉토리에 타입 선언 파일을 두고 싶을 수 있다. 이때 typeRoots 옵션을 사용하여 원하는 디렉토리를 추가할 수 있다. 예를 들어, 프로젝트 내부의 "typings" 디렉토리에 타입 선언 파일을 두고 있다면, typeRoots 옵션에 해당 경로를 추가하여 ts가 해당 디렉토리를 검색하도록 설정할 수 있다.

요약하면, types 옵션은 프로젝트에서 사용할 타입 선언 파일을 선택하거나 확장하는 데 사용되며, typeRoots 옵션은 타입 선언 파일을 찾을 디렉토리 경로를 설정하는 데 사용된다. 이 두 옵션은 타입 관련 설정을 보다 효율적으로 조정하고 외부 라이브러리의 타입 정보를 관리하기 위한 목적을 갖고 있다.

• target
  target은 ts코드가 어떤 런타임에서 실행이 가능한지에 대해서 결정하는 역할을 함과 동시에 js의 언어 버전을 설정하는 곳이다. 종류에는 ES3 ~ ES6, ES2015 ~ ES2023 등이 있다. 높은 버전을 선택하면 더 최신의 js 문법과 기능을 사용할 수 있지만, 이에 따른 호환성 문제가 발생할 수 있다. 예를 들어, ES5 이하 버전을 선택하면 화살표 함수, 클래스 등과 같은 ES6 기능을 사용할 수 없다.

• lib
  lib은 개발자가 최종적으로 실행하고자 하는 환경에 맞게 기본타입들을 정의함으로서 코딩에 문제가 없도록 사전에 예방해주는 옵션이다. 이 옵션을 사용하여 프로젝트에서 사용할 타입 정보를 제한하거나 확장할 수 있다. 기본적으로 ts는 해당 ECMAScript 버전의 기본 타입 선언 라이브러리를 사용하며, "lib" 옵션을 통해 사용할 라이브러리를 명시적으로 지정할 수 있다.

  예를 들어, "ES6" 버전의 js를 컴파일하고자 할 때, lib 옵션에는 ES6을 명시하여 해당 버전의 타입 선언 라이브러리를 사용하도록 설정할 수 있다. 이를 통해 해당 ECMAScript 버전에 포함된 객체나 함수의 타입 정보를 ts가 제대로 이해하고 검사할 수 있게 된다.
  

기본적으로, target 옵션에 따라 자동으로 지정되는 기본 lib옵션이 있다. 추가하고 싶은 사항이 있을 때, 개발자는 이 옵션에 추가하면 된다.

요약하면, "target" 옵션은 컴파일된 js 코드의 버전을 선택하는 데 사용되며, "lib" 옵션은 컴파일 시에 사용할 타입 선언 라이브러리의 목록을 설정하는 데 사용된다.

• outDir
  컴파일된 js 파일들이 저장될 디렉토리 경로를 지정한다. ts 컴파일러는 이 경로에 js 파일을 생성하게 된다. 이 옵션을 설정하면 컴파일 결과물을 특정 디렉토리에 정리하여 유지보수 및 배포를 더 편리하게 할 수 있다.

• outFile
  모든 ts 파일을 단일한 js 파일로 병합하여 저장할 때 사용된다. 이 옵션은 주로 작은 프로젝트나 라이브러리에서 사용되며, 모듈 의존성을 줄이는 데 유용할 수 있다.

• rootDir
  컴파일의 기준이 되는 소스 코드 디렉토리 경로를 지정한다. ts 컴파일러는 이 경로 아래에 있는 ts 파일들을 찾아 컴파일한다. 이 옵션을 설정하면 프로젝트 내에서 어떤 디렉토리부터 컴파일할지를 명시할 수 있다.

요약하면, outDir 옵션은 컴파일된 js 파일이 저장될 디렉토리를 지정하고, outFile 옵션은 모든 ts 파일을 단일한 js 파일로 병합하여 저장하며, rootDir 옵션은 컴파일의 기준이 되는 소스 코드 디렉토리 경로를 지정한다. 개발자는 이러한 옵션들을 설정하여 프로젝트의 컴파일 동작을 조정할 수 있다.

• strict
  ts 컴파일러에서 다양하고 강력한 엄격한 타입 체크 옵션들을 활성화하고 비활성화하는데 사용되는 옵션이다. 이 옵션을 활성화하면 ts 컴파일러가 코드에서 발생할 수 있는 잠재적인 오류를 더욱 엄격하게 감지하고 보다 안전한 코드를 작성할 수 있도록 도와준다. strict 옵션의 내부에는 여러가지 세부 strict 옵션들이 있으며, strcit 옵션 그자체는 여러 세부 옵션의 부모이다. 이를 활성화 한다는 것은 모든 세부 옵션을 활성화 한다는 뜻이다.

  strict 모드를 사용하면 코드의 안정성과 일관성을 높일 수 있다. 때문에 default로 true가 설정되어 있으며 그대로 사용하는 것이 권장된다. 하지만 이에 따라 더 많은 타입 관련 경고나 에러 메시지가 표시될 수 있으므로, 초기에는 코드를 개선하고 이해하는 데 시간이 조금 더 걸릴 수 있다.

각각의 세부옵션은 이 포스트에서 확인할 수 있다.

4. files, include, exclude

files, include, exclude 는 어떤 파일을 컴파일 할지의 여부를 정한다. 만약 files 나 include 프로퍼티가 config 파일에 없으면 컴파일러는 모든 파일을 컴파일 하려고 하기 때문에 이를 잘 설정해줘야 한다. 각각의 items 프로퍼티에 파일의 경로들이 지정이 된다. files는 가장 부모의 설정이기에 exclude로 제외되었다 하더라도 files에 있으면 포함이 된다. include는 exclude보다 약하다. 한 파일이 include, exclude에 둘다 있으면 제외된다.

• files
  컴파일할 파일 목록을 직접 지정할 때 사용된다. 이 옵션을 사용하면 해당 목록에 포함된 파일만 컴파일 대상으로 간주됩니다. 주로 작은 프로젝트나 특정 파일만을 컴파일하고자 할 때 사용되고, 일반적으로는 "include"와 "exclude" 옵션을 사용하여 더 유연하게 파일을 관리하는 것이 권장된다.

• include
  컴파일 대상으로 포함할 파일의 패턴을 지정하는데 사용된다. 이 옵션을 사용하여 특정 디렉토리 내의 파일 또는 패턴을 지정하여 컴파일 대상으로 선택할 수 있다.

• exclude
  컴파일에서 제외할 파일을 지정하는데 사용된다. 주로 특정 디렉토리나 파일을 컴파일에서 제외하고자 할 때 사용된다. default로 제외되는 파일들은node_modules, bower_components, jspm_packagers, <outDir> 이다.

요약하면, files 옵션은 직접 파일 목록을 지정할 때 사용되며, include 옵션은 컴파일 대상으로 포함할 파일 패턴을 지정하고, exclude 옵션은 컴파일에서 제외할 파일 패턴을 지정하는 데 사용된다. 옵션의 우선 순위는 files > exclude > include 이다.