타입스크립트(TypeScript) 프로젝트를 구성할 때 tsconfig.json 파일은 컴파일러(compiler: 소스 코드를 다른 언어로 변환하는 도구로, 설계도를 바탕으로 부품을 가공하는 기계와 같다)의 동작 방식과 검사 규칙을 정의하는 핵심 설정 파일이다. 이 파일은 프로젝트 루트 디렉터리에 위치하며, 컴파일 대상 파일의 범위, 변환할 자바스크립트(JavaScript) 버전, 출력 경로, 그리고 타입 검사의 엄격도를 세부적으로 제어한다. 본 글에서는 tsconfig.json에 정의된 주요 컴파일러 옵션(compilerOptions)과 파일 포함 및 제외 설정의 역할을 설명한다.
"compilerOptions": {
/* Language and Environment */
// 최신 브라우저에서만 돌아가는 앱인 경우 "es6"를 적용하여 컴파일된 코드를 보다 간결하게 만들 수 있다.(const, let 등의 문법 적용)
"target": "es6",
// 아래의 lib 옵션은 target 옵션을 "es6"으로 설정했을 때 기본적으로 적용되는 설정들이다.
// (lib옵션이 없을 때와 동일한 효과)
// lib 옵션이 없다면 지정된 target 옵션 값에 따라 자동으로 기본 설정이 적용된다.
// 빈 배열을 값으로 가진 lib 옵션을 활성화할 경우 옵션이 초기회되기 때문에 컴파일 오류가 발생할 수 있으니 주의.
"lib": [
"DOM", // 모든 DOM API를 사용할 수 있게 해줌.
"es6",
"DOM.Iterable",
"ScriptHost"
],
/* Modules */
// rootDir 옵션으로 ts를 작성하는 위치(컴파일을 진행할 폴더)를 지정할 수 있다.
// (outDir 옵션과 함께 사용할 수 있음)
// rootDir 옵션이 없는 상태에서 src 폴더와 dist 폴더로 나누어 작업하는 경우
// 컴파일 대상을 전체 프로젝트로 간주하기 때문에 src폴더가 dist 폴더에 포함되는 불상사가 생길 수 있음
"rootDir": "./src",
// allowJs 옵션은 ts가 js파일도 컴파일 할 수 있도록 해준다.
"allowJs": true,
/* JavaScript Support */
// checkJs 옵션은 컴파일을 수행하지 않더라도 구문을 검사하고 잠재적 에러를 보고해준다.
// 이는 ts를 사용하지 않고 일부 기능의 장점만 취하고자 할 때 사용한다.
// -> ts는 js에서 효과적으로 사용할 수 있는 any 타입만 허용하는데 이 옵션이 그와 같이 설정해줌.
// ts만 사용하는 프로젝트의 경우 자동으로 컴파일해주기 때문에 필요 없는 옵션이다.
// -> js만 사용하거나 ts와 js를 혼용하여 사용하는 경우에 사용할 수 있다.
"checkJs": true,
/* Emit */
// sourceMap 옵션을 true로 설정하면 컴파일시 js파일과 함께 js.map파일도 함께 생성된다.
// 이는 개발자 도구의 source 탭에서 ts 파일도 확인할 수 있도록 해주기 때문에 디버깅을 훨씬 수월하게 해줄 수 있다.
// (ts 파일에서 break point 지정 가능)
"sourceMap": true,
// outDir 옵션을 사용하면 생성된 파일이 저장되는 위치를 ts 컴파일러에 알릴 수 있다.
// 이 옵션을 설정하면 js파일이 src 폴더가 아닌 dist 폴더에 있다는 것을 알 수 있다.
// 개별 파일 뿐 아니라 폴더 안에서 ts파일을 작성하더라도 dist 폴더 안에 똑같은 구조로 만들어준다.
// -> src/analytics/analytics.ts => dist/analytics/analytics.js
"outDir": "./dist",
// 컴파일시 ts파일에 포함된 주석을 제외하고 컴파일한다.
// 파일의 크기를 줄이는데 도움이 된다.
"removeComments": true,
// noEmit 옵션을 true로 설정하면 js파일을 생성하지 않는다.
// 규모가 큰 프로젝트에서 출력파일을 가져오지 않고도 컴파일러가 파일을 검사하고 잠재적 에러를 보고하도록 할 수 있음.
"noEmit": true,
// downlevelIteration 옵션을 true로 설정하면 컴파일시 for 등의 루프가 의도대로 작동하지 않는 경우 설정해줄 수 있다.
// 컴파일시 더 상세한 코드로 출력해주기 때문에 항상 true로 적용해 두는 것은 비효율적일 수 있다.
"downlevelIteration": true,
// noEmitOnError옵션을 true로 설정하면 컴파일시 에러가 발생하면 js파일을 생성하지 않는다.
"noEmitOnError": true,
/* Type Checking */
// strict 옵션은 모든 strict Type Checking 옵션을 활성화한다.
// (strict 옵션 하나만 true로 변경하면 모두 true로 설정한 효과)
"strict": true,
// noImplicitAny 옵션은 매개변수(parameter) 값을 명확히 할 수 있도록 해줌. (any 비허용)
// 변수의 경우는 any로 설정되어도 오류가 발생하지 않는데 이는 코드의 흐름에 따라 할당된 값을 토대로 추적될 수 있기 때문이다.
"noImplicitAny": true,
// strictNullChecks 옵션은 null 값을 잠재적으로 가질 수 있는 값에 접근하는 방식을 엄격하게 알려줄 수 있다.
// !(느낌표)나 ?(물음표), if문 설정 등을 사용하여 에러를 해결할 수 있다.
// 만약 이 옵션을 false로 해두고 작업하면 컴파일 에러는 피할 수 있지만 참조되는 값이 null인 경우 런타임에서 오류가 발생한다.
"strictNullChecks": true,
// strictFunctionTypes 옵션은 함수에 설정된 매개변수와 리턴 값의 타입들이 상충되지 않는지 검사해준다.
// -> 매개변수가 string인 함수 타입을 설정하고 매개변수가 (string | number)인 함수를 할당할 수 없다.
// 클래스나 상속을 사용하여 작업한다면 불필요한 옵션이다.
"strictFunctionTypes": true,
// strictBindCallApply 옵션은 bind, call, apply 메서드를 사용하는 경우 유용할 수 있다.
// 매개변수(parameter)가 필요한 함수를 구성하지 않고 바로 전달하는 경우 에러 발생
// -> clickHandler는 string 타입 매개변수 필요; -> (button.addEventListener('click', clickHandler.bind(null))) 에러 발생
// -> 이 때 두 번째 인수를 전달한다면 에러가 사라지게 된다.
// -> button.addEventListener('click', clickHandler.bind(null, 'string 메시지'))
"strictBindCallApply": true,
// alwaysStrict 옵션은 컴파일시 js파일에 'use strict'를 추가하여 strict모드를 사용하도록 해준다.
"alwaysStrict": true,
// noUnusedLocals 옵션은 사용되지 않은 지역변수가 선언되는 경우 에러를 표시한다.
// -> function a(){let username = 'max'} // 함수내에서 사용되지 않는 변수 선언 -> 에러
// ts 파일의 가장 바깥 영역에 사용하지 않는 변수를 설정하는 것은 에러를 표시하지 않는다. -> 다른 ts파일에서 참조될 수도 있기 때문.
"noUnusedLocals": true,
// noUnusedParameters 옵션은 사용되지 않은 매개변수가 존재하는 경우 에러를 표시한다.
"noUnusedParameters": true,
// noImplicitReturns 옵션은 특정 조건에서는 리턴하고 다른 경우에는 리턴하지 않는 함수가 있는 경우 에러를 나타낸다.
// function fun(n1){if(n1 === 1) return n1;} -> n1이 1인 경우에는 리턴하고 다른 경우에는 리턴하지 않으므로 에러 발생
// 즉, 모든 분기가 return 문으로 이어지지 않으면 에러
// 어떤 경우에도 return 하지 않는 함수는 에러를 표시하지 않음.(ex. console.log만 실행하는 함수인 경우)
"noImplicitReturns": true,
},
// 전체 프로젝트에 대해 tsc를 실행할 때 컴파일시 제외할 항목
"exclude": [
"**/*.dev.ts", // 모든 폴더에서 .dev.ts로 끝나는 모든 파일을 컴파일 제외시킨다
"node_modules" // exclude 옵션이 없다면 자동으로 컴파일 제외 처리 되지만 있다면 반드시 node_modules 폴더를 포함시킨다.
],
// 컴파일 할 항목을 지정해줌. 이외의 항목은 컴파일 되지 않는다.
// exclude 옵션과 include 옵션이 같이 있다면 include 옵션에 포한된 항목 중에 exclude에 포함된 항목을 제외하고 컴파일된다.
// (include - exclude)
"include": [],
// 컴파일하고자 하는 개별 파일만(폴더x) 지정. 소규모 프로젝트에서 사용
"files": []
}

1. 언어 및 실행 환경 설정 (Language and Environment)
target과 lib 속성은 코드가 변환될 자바스크립트의 표준 버전과 프로젝트에서 사용할 환경 API의 타입 정의를 결정한다.
target: 컴파일 결과물로 생성될 자바스크립트 버전을 지정한다."es6"로 지정하면const,let, 화살표 함수와 같은 최신 문법이 구형 문법(var등)으로 다운레벨 변환되지 않고 유지되어 변환 코드가 간결해진다.lib: 런타임(runtime: 프로그램이 실행되는 실행 환경)에서 기본 제공되는 전역 객체 및 API의 타입 정의 목록이다. 브라우저 환경에서 필요한"DOM"이나 ES6 기본 기능인"es6"등을 명시한다.lib옵션을 빈 배열([])로 지정하면document,console등의 기본 객체 타입을 찾지 못해 대량의 컴파일 오류가 발생하므로 주의해야 한다.
2. 모듈 및 자바스크립트 지원 (Modules & JavaScript Support)
프로젝트 소스 코드의 입력 구조와 기존 자바스크립트 파일의 포함 여부를 제어하는 설정이다.
rootDir: 컴파일 대상 소스 파일이 위치하는 루트 폴더(예:./src)를 지정한다.outDir과 함께 사용할 때 소스 폴더의 내부 디렉터리 구조를 출력 폴더에 그대로 유지하도록 보장한다.allowJs: 타입스크립트 컴파일러가 자바스크립트(.js) 파일도 함께 가져와 컴파일할 수 있도록 허용한다. 기존 자바스크립트 기반 프로젝트를 타입스크립트로 점진적으로 전환할 때 유용하다.checkJs: 자바스크립트 파일 내부의 문법 오류와 잠재적 타입 에러를 검사하여 보고한다.allowJs와 함께 활성화하면.js파일에서도 기본적인 타입 검사 이점을 얻을 수 있다.
3. 결과물 출력 설정 (Emit)
컴파일 과정에서 자바스크립트 파일과 디버깅 정보가 디스크에 기록되는 방식을 정의한다.
sourceMap: 소스 맵(source map: 변환된 자바스크립트 코드와 원본 타입스크립트 코드를 연결하는 매핑 파일로, 번역본과 원본을 대조하는 색인표와 같다) 파일을 생성한다. 브라우저 개발자 도구에서 원본.ts파일에 중단점(breakpoint)을 설정하고 디버깅할 수 있도록 지원한다.outDir: 컴파일 결과물인 자바스크립트 파일들이 저장될 대상 디렉터리(예:./dist)를 지정한다. 원본 소스의 계층 구조가 출력 경로 안에 그대로 복제된다.removeComments: 컴파일 결과물에서 모든 주석을 삭제하여 파일 용량을 최적화한다.noEmit: 자바스크립트 출력 파일을 생성하지 않고 타입 검사만 수행하도록 지정한다. 지속적 통합(CI) 환경 등에서 타입 검사 전용으로 빌드를 실행할 때 사용한다.downlevelIteration: 구형 자바스크립트 환경에서for...of문이나 전개 구문(spread operator)이 정확하게 동작하도록 도우미 코드를 추가하여 변환한다.noEmitOnError: 컴파일 과정에서 타입 에러가 하나라도 발생하면 자바스크립트 출력 파일 생성을 전면 중단한다. 결함이 있는 코드가 런타임에 배포되는 상황을 방지한다.
4. 타입 검사 옵션 (Type Checking)
코드 작성 시 잠재적인 런타임 오류를 방지하기 위해 엄격한 검사 규칙을 설정한다.
strict: 타입스크립트의 모든 엄격 모드(strict mode: 검사 규칙을 가장 강하게 적용하는 모드) 설정을 일괄 활성화한다.noImplicitAny: 타입이 명시되지 않고 문맥으로도 추론되지 않아 암시적으로any타입이 되는 매개변수(parameter)에 대해 에러를 표시한다.strictNullChecks:null이나undefined값을 가질 가능성이 있는 변수에 직접 접근하는 것을 차단한다. 옵셔널 체이닝(?.), 널 단언(!), 또는 조건문을 통한 분기 처리를 강제하여 런타임 참조 오류를 예방한다.strictFunctionTypes: 함수의 매개변수 및 반환값 타입 간의 상충 여부를 엄격하게 검사한다.strictBindCallApply:bind,call,apply메서드 사용 시 전달되는 인수의 타입 일치 여부를 검증한다.alwaysStrict: 생성되는 모든 자바스크립트 파일 상단에'use strict'구문을 자동으로 추가한다.noUnusedLocals/noUnusedParameters: 선언된 후 사용되지 않는 지역 변수나 함수 매개변수가 존재할 때 에러를 발생시켜 불필요한 코드 잔재를 방지한다.noImplicitReturns: 함수 내부의 모든 조건 분기가 값을 명시적으로 반환(return)하지 않는 경우 에러를 발생시킨다.
5. 컴파일 대상 관리 (Files, Include, Exclude)
컴파일러가 읽어 들일 파일 목록과 제외할 범위를 지정한다.
include: 컴파일에 포함할 파일이나 디렉터리 경로 패턴을 지정한다.exclude:include로 포함된 대상 중 컴파일에서 제외할 파일 패턴을 지정한다.exclude옵션을 직접 정의하는 경우 기본 제외 대상이 초기화되므로 반드시"node_modules"를 목록에 포함해야 의도치 않은 패키지 파일 컴파일을 방지할 수 있다.files: 단일 파일 단위로 컴파일 대상을 지정할 때 사용하며, 와일드카드 패턴은 사용할 수 없다. 소규모 프로젝트나 특정 진입점 파일만 지정할 때 적합하다.