[TypeScript] 타입스크립트 컴파일러 옵션 설정

컴파일러 옵션?

config파일

• 프로젝트에서 사용되는 도구나 라이브러리의 동작 방식을 설정한는 설정 파일
• 제품의 초기 설정값을 세팅하는 것과 동일

{
    "compilerOptions": {
        "target": "ESNext",
        "module": "ESNext",
        "outDir": "dist",
        "strict": true,
        "moduleDetection": "force"
    },
    "include": ["src"]
}

include

• tsc에게 컴파일할 파일의 범위와 위치를 알려주는 옵션
• "include": ["src"]: src라는 폴더에 있는 모든 파일들을 컴파일하겠다.

target

• 컴파일 결과로 생성되는 자바스크립트의 버전을 설정하는 옵션
• [ES5, ES6, ESNext: 자바스크립트 최신 문법]

module

• 자바스크립트 코드의 모듈 시스템을 설정하는 옵션
• CommonJS, ESNext
• module: "CommonJS" 일 때

// index.ts
console.log("Hello New Project");
// index.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
console.log("Hello New Project");

• module: "ESNext" 일 때

// index.ts
console.log("Hello New Project");
// index.js
console.log("Hello New Project");
export {};

outDir

• 컴파일 결과인 자바스크립트 코드의 위치를 결정하는 옵션
• 컴파일된 자바스크립트 파일이 "dist" 폴더에 저장

strict [true, false]

• 컴파일의 타입 검사 엄격함을 결정하는 옵션
• strict: false ⇒ 보통 js→ts 마이그레이션 작업 시 설정

moduleDetection

• 타입스크립트의 모든 파일은 기본적으로 전역 파일(모듈)로 취급받기 때문에 두 파일에 동일 변수를 선언 시 오류가 발생
• 해결법
  1. 각 파일에 모듈 시스템 키워드 사용
  2. "moduleDetection": "force" → 각 파일을 로컬 모듈로 인식

compilerOptions가 따로 있는 이유

• compilerOptions에는 TypeScript가 코드를 어떻게 컴파일 할지에 관해서 세부 규칙들을 정의
• include는 프로젝트의 파일 구조와 관련된 설정

** 위 내용은 이정환 개발자(winterlood) 한 입 크기로 잘라먹는 타입스크립트(TypeScript)강의 내용을 바탕으로 제작했습니다.