타입스크립트 설정 - tsconfig.json

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

2025년 기준 타입스크립트 사용 시 위와 같이 설정하면 된다.

몇 가지 옵션을 직접 설정하긴 했다. 위의 설정에 대해서 알아보자.

1. target

이 옵션은 TypeScript 코드가 컴파일될 때 생성되는 JavaScript 코드의 ECMAScript 버전을 지정한다.

2. moduleDetection

이 옵션은 TypeScript가 모듈을 어떻게 감지할지 결정한다.
"force" 옵션을 사용하면, TypeScript는 모든 파일을 모듈로 간주하여, 모듈 시스템에 따라 각 파일의 스코프를 분리한다.

조금 더 예를 들자면, index.ts 파일에 const a = 1, test.ts 파일에 const a =2; 로 작성하면, 각 파일은 모듈로 감지하지 않기 때문에 ts 컴파일러에서 에러로 감지한다. moduleDetection 을 true로 설정하면 위와 같은 상황을 각각의 모듈로 판단하여 에러로 감지하지 않게 된다.

3. module

이 옵션은 TypeScript가 모듈 시스템을 어떤 형태로 변환할지 결정한다.
"ESNext"를 선택하면, 최신 ECMAScript 모듈 문법(ESM)을 그대로 유지하여 JavaScript로 출력한다.

4. outDir

컴파일된 JavaScript 파일이 저장될 디렉토리를 지정한다.
"dist" 폴더로 설정하면, 모든 컴파일 결과물이 이 폴더에 출력된다.

5. esModuleInterop

이 옵션은 CommonJS 모듈과 ECMAScript 모듈 간의 호환성을 개선한다.

CommonJS로 작성된 라이브러리를 import 구문으로 사용할 수 있도록 허용해 준다.

예를 들어, CommonJS 방식으로 내보내진 모듈을 import something from 'module' 형태로 불러올 수 있게 한다.

6. forceConsistentCasingInFileNames

이 옵션은 파일 이름의 대소문자 사용이 일관되게 유지되도록 강제한다.

예를 들어, 실제 파일명이 myModule.ts인데 import MyModule from './MyModule'처럼 대소문자가 다르면 컴파일 에러를 발생시켜, 운영체제에 관계없이 일관된 파일 이름을 유지하도록 한다.

7. strict

이 옵션은 TypeScript의 모든 엄격한 타입 검사 옵션을 활성화한다.

8. skipLibCheck

이 옵션은 타입 선언 파일(.d.ts)의 타입 검사를 건너뛰도록 한다.

9. include

컴파일할 파일의 범위를 지정한다.