최상위 옵션 5가지
compilerOptions
- 프로젝트를 자바스크립트를 변환할 때 주는 옵션들
files
- 타입스크립트를 자바스크립트로 변환할 때 어떤 파일을 사용할건지 지정(폴더 단위로 지정 가능)
exclude
- 제외하고 싶은 경로 지정(대표적으로
node_modules,./dist)
include
-
포함하고 싶은 경로 지정
"include": ["src/**/*.ts"]
extends
tsconfig.base.json파일 안의compilerOptions속성이 있고, 만약 겹치는 경우tsconfig.json쪽 기준으로 덮어쓰고, 추가된 속성이 있을경우 추가한다. 그냥 말그대로extends다.
참고로 files, exclude, include순으로 우선순위가 높고, 대부분의 경우 include와 exclude설정 만으로도 충분하다.
compilerOptions 속성
strict
엄격한 타입 검사를 활성화 해주는 옵션으로 기본 값은 false로 아래 옵션들을 자동으로 활성화 한다. 필수로 true로 설정하는 옵션이다.
- noImplicitAny : 암시적 any 타입 불가
- noImplicitThis : 암시적 this 타입 불가
- strictNullChecks : 엄격한 null, undeifined 타입 검사
- strictFunctionTypes : 엄격한 함수의 매개변수 타입 검사
- strictPropertyInitialization : 엄격한 클래스의 속성 초기화 검사
- strcitBindCallApply : 엄격한 bind, call, apply 메소드의 인수 검사
주의할 점은 JS의 strict mode와는 아예 다른 개념이다.
target
컴파일될 ES(JS) 버전을 명시한다.
권장되는 버전은 ES2015이다.
lib
컴파일에서 사용할 라이브러리를 지정한다.
target옵션에 따라 자동으로 지정된다.
기본값은 ["DOM", "DOM.Iterable"] 이지만, 어떤 속성을 하나를 설정하면 이 기본 값들이 사라지게 되므로 보통 가장 최신의 ESNext를 설정하고 나머지 기본값을 뒤에 명시하는 방향으로 설정한다.
추천되는 프로퍼티는 ["ESNext", "DOM", "DOM.Iterable"]이다.
module
사용할 모듈 방식을 지정한다.
CommonJS, ES6/ES2015, ES2010, ESNext등이 있다.
우리에게 가장 익숙한 import, export를 사용하기 위해서는 CommonJS가 아닌 ESM방식을 사용해야 한다.
권장되는 방식은 가장 최신의 모듈 방식인 ESNext이다.
moduleResolution
컴파일러가 사용할 모듈 해석 방식을 지정한다.
추천하는 방식은 node / bundler 이다.
bundler의 경우 Vite, Webpack, Parcel 등의 최신 번들러를 사용하는 경우 명시한다.
paths
지정한 이름을 가져오기 문법에서 사용 가능함(경로 별칭)
"paths": {
"myUtils": ["./js/myUtils.js"],
"~/*": ["./src/*"]
}import utils, { add } from "myUtils"
import { add as sum } from "~/js/myUtils.js"
add(1, 2)
sum(3, 6)이렇게하면 별도의 상대경로 없이 node_modules 폴더 안의 파일을 바로 가져오듯이 사용가능하다.
jsx
JSX 출력 방식을 제어한다
- react-jsx : JSX를 변경해
.js파일로 출력,_jsx함수를 통해 출력 - react-jsxedv : JSX를 변경해
.js파일로 출력,_jsxDEV함수를 통해 출력 - react : JSX를 변경해
.js파일로 출력,React.cretaeElement함수를 통해 출력 - react-native : JSX 변경 없이
.js파일로 출력 - preserve : JSX 변경 없이
.jsx파일로 출력
outDir
출력하는 결과를 폴더를 지정 가능하다.
통상적으로 dist 폴더에 js파일을 관리한다.
typeRoots
어떤 라이브러리를 사용할때 자바스크립트와 달리 타입을 지정해줘야 해서 바로 사용할 수가 없는데 이미 남이 만들어놓은 타입선언을 사용할 수 있다.
"typeRoots": ["node_modules/@types"]해당 폴더안의 이미 만들어져 있는 타입선언 활용할 수 있다.
esModuleInterop
"esModuleInterop": true기본적으로 false 일때는 가져오기와 내보내기에서 common.js나 amd같은 모듈 방식도 ES6 모듈과 유사하게 처리가 가능하게 한다.
하지만 두 가지 문제점이 있다.
// import * as XXX from "XXX" ==> const XXX = require("XXX")로 컴파일
// import XXX from "XXX" ==> const XXX = require("XXX").default로 컴파일각각 ES6모듈에 어긋나는, Typescript만큼 엄격하게 규칙을 준수하지 않는 다는 문제를 가지고 있다.
값을 true를 설정하는 경우 이 두가지 문제를 모두 해결할 수 있다.
XXX가 ES6 모듈이면 module.exports 객체를 그대로 반환하고, 아니라면 module.exports의 프로퍼티들을 그대로 가지고 있으며 default 프로퍼티로는 module.exports 자체를 가리키는 또 다른 객체를 만들어 반환하는 방식을 사용하기 때문이다.
Babel도 이와 같은 방식으로 컴파일을 하기 때문에 Babel 생태계와의 호환성을 위해서는 프로퍼티 값을 true로 두고 사용하자.
이것이 모던한 방법이라고 한다.
allowJs
자바스크립트 파일을 허용한다.
"allowJs": true참고자료
https://velog.io/@jcs5679/esModuleInterop-true-%EC%98%B5%EC%85%98
