Day39 - TIL tsconfig.json 이해

tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "target": "ES2015",
    "lib": ["ESNext", "DOM", "DOM.Iterable"],
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowJs": true,
    "outDir": "dist",
    "paths": {
      "myUtils": ["./js/myUtils.js"]
    }
  },
  "files": ["./files/index.ts"],
  "exclude": ["./node_modules", "./dist"],
  "include": ["./src/**/*.ts", "types/**/*.ts"],
  "extends": "./config/tsconfig.base.json"
}

complierOptions

• 현재 프로젝트를 자바스크립트로 변환할 때 어떤 옵션의 내용으로 해석해서 변환할건지 지정

files(우선순위 1)

• ts -> js 변환 시 어떤 파일을 사용할건지 지정(개별적 파일)

exclude(우선순위 2) * 대부분 사용

• 제외하겠다~~

include(우선순위 3) * 대부분 사용

• ts -> js 변환 시 폴더 단위로 지정

extends

• 확장 루트의 tsconfig.json과 중복되는 속성이 있으면 덮어쓰여진다.

세부 옵션들

strict : 엄격한 타입 검사 활성화, 아래 옵션들을 자동으로 활성화

• 기본: false
• noImplictAny : 암시적 any 타입 불가
• noImplictThis : 암시적 this 타입 불가
• strictNullChecks : 엄격한 null,undefined 타입 검사
• strictFunctionTypes : 엄격한 함수의 매개변수 타입 검사
• strictPropertyInitialization : 엄격한 클래스의 속성 초기화 검사
• strictBindCallApply : 엄격한 bind,call,apply 메소드의 인수 검사

target : 컴파일될 ES(JS) 버전을 명시

• 권장 : ES2015(ES6)

// ES5, ES6/ES2015, ES2016, ES2017, ES2018, ES2019, ES2020, ESNext

lib : 컴파일에서 사용할 라이브러리 지정

• target 옵션에 따라 기본값이 자동으로 지정

//추천 : ["ESNext","DOM","DOMIterable"]
// 가장 최신 버전의 문법들을 사용하기 위해서

module : 프로젝트에서 사용할 모듈 방식 지정

// "CommonJS", "ES6"/"ES2015", "ES2020", "ESNext" 등
// ES2020 에서 import() 나 import.meat.url()을 사용할 수 있음
// ESNext -> 가장 최신

moduleResolution : 컴파일러가 사용할 모듈의 해석 방식 지정

• 추천 : node / bundler
  • 선택 : classic, node, nodenext, bundler 등
  • nodenext : Node.js의 ES 모듈 지원
  • bundler : Vite, esbuild, Webpack, Parcel 등 최신 번들러를 사용하는 경우

paths : 경로 별칭 지정

"paths": {
      "myUtils": ["./js/myUtils.js"] // myUtils로 가져다 쓸 수 있음
}

jsx : jsx 출력 방식 제어

• react-jsx : JSX 변경 .js파일로 출력 (_jsx)
• react-jsxdev : JSX 변경 .js파일로 출력 (_jsxDEV)
• react : JSX 변경 .js파일로 출력 (React.createElement)
• react-native : JSX 변경 없이, .js 파일로 출력
• preserve : JSX 변경 없이, .jsx 파일로 출력

outDir : 결과를 출력할 폴더 이름