[TS] 타입스크립트 컴파일러 옵션 알아보기

 

1. 컴파일러 옵션이란?

• 타입스크립트의 컴파일은 코드에 타입 오류가 있는지 없는지 검사한 뒤 자바스크립트로 변환한다. 이 과정에서 얼마나 엄격한 타입 오류를 검사할 건지 또는 컴파일 결과 생성되는 자바스크립트 코드의 버전은 어떻게 할 것인지 등의 세부적인 사항들을 컴파일러 옵션이라고 한다. 
• 컴파일러 옵션은 개발자 자신의 스타일에 따라 자유롭게 변경할 수 있다. 
• 즉, 내가 진행하는 프로젝트 특성에 맞게 맞춤 설정을 할 수 있다. 

 

2. 컴파일러 옵션 자동 생성하기

• vite, cra 등을 사용하면 자동으로 설치된다. 
• 만약 그렇지 않다면 아래 명령어를 통해 기본 설정이 완료된 tsconfig.json 파일을 생성할 수 있다. 

tsc --init

 

3. 컴파일러 옵션 직접 설정하기

{
  // 여기 입력된 값들은 모두 기본값
  // 따로 입력하지 않으면 여기에 있는 값 그대로 입력됨!

  // 컴파일러 옵션 지정
  "compilerOptions": {
    // 컴파일될 ES(JS) 버전 명시 - "ES2015"(ES6) 권장
    // ES6지만 연도로 입력하는 걸 권장
    "target": "ES3",
    // 모듈 시스템 지정 - "commonJS", "AMD", "ESNext"(ESM)
    "module": "commonJS",
    // 컴파일 결과, 생성할 자바스크립트 코드의 위치
    "outDir": "dist"
    // 모듈 해석 방식 지정 - "Node", "classic"
    "moduleResolution": "Node",
    // ESM 모듈 방식 호환성 활성화 여부
    "esModuleInterop": false,
    // 모든 파일을 모듈로 컴파일, import 혹은 export 키워드 필수
    "isolatedModule": false,
    // 모듈 해석에 사용할 기준 경로 지정
    "baseUrl": "./",
    // 컴파일러가 참조할 타입 선언(d.ts)의 경로를 지정
    "typeRoots": ["./node_modules/@type"],
    // 컴파일에서 사용할 라이브러리 지정 - "ESNext", "DOM"
    "lib" : [],
    // 더엄격한 타입 검색 활성화
    "strict": false,
    // 암시적 any 타입 검사 활성화
    "noImplicitAny": false,
    // 암시적 this 타입 검사 활성화
    "noImplicitThis": false,
    // 엄격한 Nullish 타입 검사 활성화
    "strictNullChecks": false,
    // 엄격한 함수의 매개변수 타입 검사 활성화
    "strictFunctionType": false,
    // 엄격한 클래스의 속성 초기화 검사 활성화
    "strictPropertyInitial": false,
    // 엄격한 bind, call, apply 메소드의 인수 검사 활성화
    "strictBindCallApply": false,
    // 모든 타입스크립트 파일을 로컬 모듈(독립 모듈)로 취급
    "moduleDetection": "force",
  }

  // 컴파일할 파일 경로 목록
  // 자바스크립트로 변환이 필요한 타입스크립트의 경로를 작성
  "include": [
    "src/**/*.ts"
  ],
  // 컴파일에서 제외할 파일 경로 목록
  "exclude": [
    "node_modules"
  ]
}

 

 

📌 

한 입 크기로 잘라먹는 타입스크립트(TypeScript)