tsconfig 설정 항목 정리

GY·2022년 4월 4일
0

Typescript

목록 보기
8/14
post-thumbnail

tsconfig.json 설정을 하면서 사용한 항목들을 간단하게 정리해두었다.

compilerOptions

어떤 컴파일 설정을 사용할지에 대한 속성

compilerOptions 프로퍼티 내부 옵션

target

어떤 버전의 자바스크립트로 컴파일할지 지정

module

프로그램에서 사용할 모듈 시스템
모듈 내보내기/불러오기 코드가 어떠한 방식의 코드로 컴파일 될지 결정

baseUrl

비상대적 import의 모듈 해석시 기준이 되는 경로 지정
프로젝트 루트 디렉토리에 존재하는 src 디렉토리를 기준으로 모듈을 불러올 경우 './src'로 지정

paths

baseUrl 기준으로 상대위치로 가져오기를 다시 매핑하는 항목 설정

  • import 문에서 from 부분을 해석할 때 찾아야하는 디렉토리를 설정한다.
  • import 시 반복되는 경로를 사용하거나 깊이가 길어질 경우 path에서 별칭을 주어 맵핑해 사용할 수 있다.
  • 나는 firebase를 사용했기 때문에 import 문이 찾아야 하는 소스가 외부 패키지일 경우 node_modules 디렉토리에서 찾아야 하므로 node_modules/*를 포함시켜주었다.

allowSyntheticDefaultImports

불러오려는 모듈에 default export가 없어도 import * as ...가 아닌 import ...로 사용할 수 있도록 하는 설정

forceConsistentCasingInFileNames

사용할 파일의 이름을 대소문자까지 정확하게 작성하도록 강제하는 설정

moduleResolution

모듈 해석 전략을 지정
Nodejs 방식대로 모듈 해석을 하려면 Node를, 1.6버전 이전의 타입스크립트에서 사용하던 방식대로 모듈을 해석하려면 Classic을 입력한다.

allowJs

js파일을 허용하는 옵션.
타입스크립트는 .js확장자를 허용하지 않는데, 이것을 예외처리한다.

esModuleInterop

모든 가져오기에 대한 네임스페이스 객체 생성을 통해 CommonJs와 ES모듈간의 상호 운용성을 제공
true로 설정할 경우 es6모듈 사양을 준수하여 CommonJS모듈을 가져올 수 있게 트랜스파일링된다.

outDir

컴파일 후 생성되는 js파일이 생성될 폴더를 결정

profile
Why?에서 시작해 How를 찾는 과정을 좋아합니다. 그 고민과 성장의 과정을 꾸준히 기록하고자 합니다.

0개의 댓글