유형
실습문서
주제
아묻따타입
순번
7
태그
설명
"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": []
}