타입 스크립트 구성 옵션

타입 스크립트의 tsconfig.json 파일에 작성하는 구성 옵션에 대해 코드에서 주석과 함께 정리하도록 하겠습니다.

 

 

tsconfig.json 파일은 크게 세 가지 옵션 compilerOptions, include, exclude으로 구분할 수 있습니다.

{
  "compilerOptions": {
    "target": "ES2015", // TS를 JS로 변환
    "module": "ESNext", // JS의 가장 최신 버전으로 모듈 사용
    "moduleResolution": "Node", // 모듈의 해석 방식 지정
    "esModuleInterop": true, // JS의 ESM 방식과 node,js의 Commonjs 방식을 호환
    "lib": ["ESNext", "DOM"], // TS가 JS로 코드를 컴파일할 때 내부적으로 사용하는 라이브러리 목록 지정
    "strict": true // TS의 문법을 최대한 엄격하게 사용
  },
  // 프로젝트의 어느 부분에서 TS를 찾을 수 있는지 경로 지정
  "include": ["src/**/*.ts"],
  // 컴파일할 때 제외할 경로 명시
  "exclude": ["node_modules"]
}

*위의 옵션은 최소한은 옵션이자 중요한 옵션입니다.

 

 

• compilerOptions : 만들어진 타입스크립트의 코드를 자바스크립트로 변환하기 위해 작성하는 옵션입니다.

{
  "compilerOptions": {
    // 컴파일될 ES(JS) 버전 명시 - "ES2015" 권장
    "target": "ES3",

    // 모듈 시스템 지정 - "CommonJS", "AMD", "ESNext"
    "module": "CommonJS",

    // 모듈의 해석 방식 지정 - "Node", "Classic"
    // Node의 경우 파일명이 index인 파일에서 모듈 가져오기 시 경로 작성할 때 index(파일 명) 생략 가능
    "moduleResolution": "Node",

    // ESM 모듈 방식의 호환성 활성화 여부 - true, false
    // CommonJS의 경우 이름을 가진 내보내기(module.exports)만 가능하고, ESM의 경우 이름을 가진 내보내기(export default), 기본 내보내기(export) 모두 가능
    // esModuleInterop을 true로 설정해줘야 ESM의 내보내기 사용 가능하고 CommonJS의 내보내기 사용도 가능
    "esModuleInterop": false,

    // 모든 파일을 모듈로 컴파일하며 import 혹은 export 키워드가 모든 타입스크립트에 지정이 되어져 있어야 함 - true, false
    // isolatedModules를 true로 설정해주게 되면 모든 파일은 모듈이어야 합니다.
    "isolatedModules": false,

    // 모듈 해석에 사용할 기준 경로 지정
    // 일반적인 경우 tsconfig.json 파일이 루트 경로에 있지만, 상황에 따라 특정 폴더 안에 있을 수 있음
    "baseUrl": "./",

    // 컴파일러가 참조할 타입 선언(d.ts)의 경로 지정
    // Definitely Typed 설치 시 node_modules 폴더의 @types폴더에 설치가 되는데 해당 경로에서 타입을 참조함
    "typeRoots": ["./node_modules/@types"],
    // 별도의 d.ts 파일 관리시 아래와 같은 경로 지정 가능
    //   "typeRoots": ["./node_modules/@types", "./src/types"],

    // TS가 JS로 코드를 컴파일할 때 내부적으로 사용하는 라이브러리 목록 지정
    // "ESNext" : JS 최신 버전, "DOM" : 브라우저에서 동작 가능한 JS
    "lib": ["ESNext", "DOM"],

    // TS의 문법을 최대한 엄격하게 사용 = true, false
    // TS의 경우 타입에 대한 엄격함이 필수이기 때문에 strict을 true로 설정하고 사용하는 것을 권장
    //  strict을 true로 설정할 경우 아래의 모든 옵션 자동으로 true로 설정
    "strict": false,

    // 암시적 any 타입 검사 활성화
    "noImplicitAny": false,

    // 암시적 this 타입 검사 활성화
    "noImplicitThis": false,

    // 엄격한 Nullish 타입 검사 활성화
    "strictNullChecks": false,

    // 엄격한 함수의 매개 변수 타입 검사 활성화
    "strictFunctionTypes": false,

    // 엄격한 클래스의 속성 초기화 검사 활성화
    "strictPropertyInitialization": false,

    // 엄격한 Bind, Call, Apply 메소드의 인수 검사 활성화
    "strictBindCallApply": false
  },

*위의 compilerOptions은 존재하는 모든 옵션은 아니며, 작성된 설정값은 각 옵션의 기본값입니다.

 

• include : 어떤 타입스크립트 파일을 컴파일해서 자바스크립트로 변환할 것인지 파일에 대한 경로를 배열로 목록화해서 제공합니다.

 "include": ["src/**/*.ts"],

위의 경우 src 폴더 내부에 있는 모든 하위 경로의 모든 이름을 가질 수 있는 확장자가 ts인 파일을 자바스크립트로 컴파일함을 의미합니다.

필요시 위의 방식으로 새로운 폴더와 경로, 파일명을 명시하여 제공할 수 있습니다.

 

 

• exclude : 최종적으로 자바스크립트로 컴파일할 때 컴파일에서 제외할 파일에 대한 경로를 배열로 목록화해서 제공합니다.

 "exclude": ["node_modules"]

위의 경우 node_modules를 컴파일 대상이 되지 않도록 경로를 명시해준 것입니다.