TypeScript 프로젝트를 시작하면 반드시 마주치는 tsconfig.json 파일. 이 파일은 TypeScript 컴파일러의 행동을 설정하는 핵심 도구입니다.
많은 개발자들이 기본 설정을 그대로 사용하거나 설정 내용을 깊이 이해하지 못한 채 넘어가곤 합니다. 하지만 tsconfig.json을 제대로 활용하면 프로젝트의 유지보수성과 효율성이 크게 향상될 수 있습니다.
이번 글에서는 tsconfig.json의 생성 과정, 주요 옵션, 그리고 효과적인 설정 방법에 대해 알아보겠습니다.
tsc 사용하기
사실 tsconfig.json 파일을 생성하지 않아도 tsc를 사용할 수 있습니다.tsc를 사용하여 TypeScript 파일을 JavaScript 파일로 컴파일 할 수 있습니다.
tsc index.ts위의 명령어를 입력하면 index.js 파일이 생성됩니다. 이름을 다르게 하고 싶으면 tsc --outFile main.js index.ts 명렁어를 사용할 수 있습니다.
이처럼 tsconfig.json 파일이 없어도 tsc를 사용할 수 있지만 왜 tsconfig.json을 설정할까요?
매번 명렁어에 옵션을 주기 번거로우며 프로젝트에서 설정을 일정하게 유지시키기 위해서 사용합니다.
tsconfig.json
최상위 속성
1. files
{
"compilerOptions": {},
"files": [
"login.ts",
"logout.ts",
"posts.ts",
"comments.ts",
"challenges.ts",
]
}files를 사용하여 우리가 원하는 파일만 tsc가 처리하도록 설정할 수 있습니다.
2. include
{
"include": ["src/**/*", "tests/**/*"]
}include를 통해서 patter 형태로 원하는 파일 목록을 지정할 수 있습니다. include와 exclude는 glob 패턴을 지원합니다.
*없거나 하나 이상의 문자열과 일치 (디렉터리 구분자 제외)?하나의 문자와 일치 (디렉터리 구분자 제외)**/단계에 관계없이 아무 디렉터리와 일치
만약 glob 패턴에 파일 확장자를 선언하지 않으면 TypeScript가 지원하는 확장자만 포함합니다.
allowJs를 활성화 하면 .js .jsx 파일도 포합합니다.
❗️ include를 지정해도 files에 지정한 파일들은 제외되지 않습니다.
3. exclude
include에 지정한 파일이나 패턴을 제외시킬 수 있습니다. 하지만 include에 지정하지 않은 파일은 적용되지 않습니다.
exclude를 지정하지 않으면 node_modules, bower_components, jspm_pacages와 outDir에 지정한 경로가 기본값으로 설정됩니다.
compilerOptions 속성
{
"include": ["src/**/*"],
"compilerOptions": {
"target": "ES6",
"module": "ES2015",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true,
"outDir": "dist",
"noUncheckedIndexedAccess": false,
"lib": ["DOM","ES2022"]:
}
}1. target
target을 통해서 tsc가 최종적으로 컴파일 하는 결과물의 문법 형태를 결정할 수 있습니다.
화살표 함수가 생긴 ES6 이전 버전인 ES5를 선택했다면 ()=>{}와 같은 화살표 함수는 모두 function 표현법으로 변환될 것입니다.
기본 값은 ES3이기 때문에 ES3에 없는 기능을 코드에 작성하면 컴파일러는 에러를 출력합니다.
2. module
컴파일된 결과물이 사용하게 될 module 방식을 지정합니다.
3. esModuleInterop
TypeScript에서 CommonJS와 ES6 모듈 간의 호환성을 높이기 위해 사용됩니다.
esModuleInterop을 true로 설정하면, require로 가져온 CommonJS 모듈을 더 자연스럽게 사용할 수 있습니다.
4. forceConsistentCasingInFileNames
파일 이름 대소문자를 엄격히 구분합니다. 이 설정을 활성화하면 Windows 환경에서도 대소문자 불일치로 인한 오류를 방지할 수 있습니다.
5. strict
TypeScript의 엄격한 타입 검사 모드를 활성화합니다. strict를 true로 설정하면 기본적으로 noImplicitAny, strictNullChecks, strictFunctionTypes과 같은 설정이 활성화됩니다.
6. skipLibCheck
타입 선언 파일(.d.ts)의 타입 검사를 건너뛰도록 설정하는 옵션입니다.
7. outDir
files와 include를 통해서 선택된 파일들의 결과가 저장되는 디렉터리를 지정합니다.
dist로 입력하고 컴파일하면 dist라는 폴더에 결과가 저장됩니다.
8. noUncheckedIndexedAccess
객체나 배열에 인덱스 접근을 할 때 undefined 가능성을 자동으로 포함하도록 강제하는 설정입니다.
9. lib
lib은 프로젝트에서 사용할 수 있는 특정 기능에 대한 문법을 추가합니다. 설정하는 target에 따라서 기본으로 설정되는 lib이 달라집니다.
lib을 ["DOM"]과 같이 지정하면 DOM관련 API의 타입을 사용할 수 있습니다. 배열 형태로 여러 개의 문법을 추가할 수 있습니다.
10. allowJs
TypeScript 프로젝트에서 JavaScript 파일을 함께 컴파일 할 수 있도록 합니다.
true로 설정하면 .js, .jsx 파일을 컴파일할 수 있습니다.
11. checkJs
allowJs와 함께 사용되며 JavaScript 파일에 TypeScript의 타입 검사를 적용할 수 있습니다.
12. declaration
true로 설정하면 TypeScript는 .d.ts 형식으로 타입 선언 파일을 자동으로 생성합니다.
13. sourceMap
true로 설정하면 TypeScript는 .js 파일과 함께 .map 파일을 생성합니다. .map 파일은 디버깅 시 TypeScript 코드로 되돌아갈 수 있도록 도와줍니다.
14. removeComments
true로 설정하면 코드에서 주석을 제거할 수 있습니다. 코드의 크기를 줄이거나 배포용 빌드에서 주석을 제거하고 싶을 때 유용합니다.
15. noEmit
TypeScript가 JavaScript 파일을 생성하지 않도록 설정합니다.
결론
이외에도 많은 속성들이 있습니다. 위에서 언급된 compilerOptions
설정들은 프로젝트의 빌드 환경을 세부적으로 조정할 수 있게 해줍니다. TypeScript를 사용하는 프로젝트에 적합한 설정을 선택하여 효율적이고 오류 없는 개발을 할 수 있도록 도와줍니다.
✅ 참고
