FE
"tsconfig.json: 설정 정보"
올바른생활부터
2024. 5. 28. 21:01
728x90
반응형
SMALL
목차
1. tsconfig.json의 설정 정보
2. 컴파일러(compilerOptions) 옵션
1. tsconfig.json의 설정 정보
- tsconfig.json 파일은 해당 타입스크립트 프로젝트가 어떻게 컴파일될지 세부적인 옵션을 정의하는 파일이다. 타입스크립트 프로젝트는 기본적으로 최상위 폴더 아래에 타입스크립트 설정 파일이 있다. 이 설정 파일에는 “**타입스크립트 컴파일을 돌릴 파일 목록과 배제할 목록, 그리고 컴파일러를 구체적으로 어떻게 동작시킬지 등 다양한 옵션을 지정”**할 수 있다.
{
// TypeScript 컴파일러의 옵션들을 지정하는 속성
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"sourceMap": true
// ... 무수히 많은 속성들
},
// 컴파일할 파일들의 개별 목록을 지정하는 속성
"files": ["src/main.ts", "src/utils.ts"],
// 컴파일할 파일들을 지정하는 속성 (와일드 카드 패턴으로 묶어 표현)
"include": [ "src/**/*.ts" ],
// 컴파일 대상에서 제외할 파일들을 지정하는 속성
"exclude": [ "node_modules", "**/*.test.ts" ],
// 다른 tsconfig.json 파일을 상속받아서 설정을 재사용할 수 있게 해주는 속성
"extends": "./configs/base.json",
// 여러 개의 하위 프로젝트로 구성된 프로젝트의 의존 관계를 지정하는 속성
"references": [
{ "path": "./subproject1" },
{ "path": "./subproject2" }
],
// 타입 습득(type acquisition)과 관련된 옵션들을 지정하는 속성
"typeAcquisition": {
"enable": true,
"include": ["jquery"],
"exclude": ["react"]
},
// watch 모드와 관련된 옵션들을 지정하는 속성
"watchOptions": {
"watchFile": "useFsEvents",
"watchDirectory": "useFsEvents",
"fallbackPolling": "dynamicPriority"
}
}
files
- 프로젝트에서 컴파일할 파일들의 목록을 명시적으로 지정하는 속성이다. files 속성은 exclude보다 우선순위가 높다
- 이 옵션은 실무에서 자주 활용되는 속성은 아니다. 실무에선 파일 개수가 많기 때문에 일일이 목록을 지정하는 것보다 include 속성을 이용하여 특정 위치나 파일 패턴으로 컴파일 대상을 지정하는 것이 효율적이다.
{
"files": [ // 파일 확장자까지 정확히 작성해줘야 한다
"src/main.ts",
"src/utils.ts",
"src/types.d.ts"
]
}
include
- include는 타입스크립트 컴파일 대상 파일의 패턴을 지정하는 속성이다.
- include 속성은 files 속성과 같이 프로젝트에서 컴파일할 파일들을 지정하는 속성이지만, 와일드 카드 패턴으로 지정한다는 점에서 차이가 있다. 또한 include는 files 속성과는 달리 exclude보다 약해 include에 명시되어 있어도 exclude에도 명시되어 있으면 제외 되게 된다.
{
"compilerOptions": {
...
},
"include": [
"src/*.ts", // src 디렉토리에 있는 모든 .ts 파일
"dist/test?.ts" // dist 디렉토리에 있는 test1.ts, test2.ts , test3.ts ..등에 일치
"test/**/*.spec.ts" // test 디렉토리와 그 하위 디렉토리에 있는 모든 .spec.ts 파일
]
}
- 와일드 카드 패턴이란 tsconfig.json 파일에서 include나 exclude 속성에 사용할 수 있는 파일이나 디렉토리를 그룹화하여 일치시키는 기호이다
- : 해당 디렉토리에 있는 모든 파일
- ? : 해당 디렉토리에 있는 파일들의 이름 중 한 글자라도 포함하면 해당
- **/ : 해당 디렉토리의 하위 디렉토리의 모든 파일을 포함
exclude
- exclude 속성은 프로젝트에서 컴파일 대상에서 제외할 파일들을 와일드카드 패턴으로 지정하는 속성이다. include의 반대되는 옵션 속성이다.
{
"compilerOptions": {
...
},
"exclude": [
"node_modules", // node_modules 디렉토리를 제외
"**/*.test.ts" // 모든 .test.ts 파일을 제외
]
}
extends
- extends는 다른 tsconfig.json 파일의 설정들을 가져와 재사용할 수 있게 해주는 옵션이다. 보통 extends 속성은 tsconfig.json 파일의 최상위에 위치한다.
{
"extends": "./configs/base",
"compilerOptions": {
"strictNullChecks": false
},
"files": [
"src/main.ts",
"src/utils.ts",
"src/types.d.ts"
]
}
2. 컴파일러(compilerOptions) 옵션
- root 옵션을 살펴보았으니 다음은 컴파일러 옵션을 살펴보겠다. 컴파일러 옵션은 타입스크립트 컴파일 작업을 진행할 때 타입 검사 레벨, 타입 라이브러리, 모듈 등 세부적인 내용을 정의할 수 있다.
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "node",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"allowSyntheticDefaultImports": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
target
- target 속성은 타입스크립트 컴파일 결과물이 어떤 자바스크립트 문법으로 변환될지 정의하는 옵션이다.
- 만약 코드가 구식의 환경에서 배포된다면 더 낮은 버전을 지정해야 하고, 신식의 환경에서만 배포된다는 보장이 있다면 더 높은 타겟으로 지정해도 된다.
"target": "ES2020",
lib
- lib 옵션은 브라우저 DOM API나 JavaScript 내장 API를 위해 선언해 놓은 타입 선언 파일을 의미한다.
- 브라우저 DOM API: 화면을 조작하는 document.querySelector() API나 비동기 처리를 위한 setTimeout() API를 의미한다.
- 자바스크립트 내장 API: Math, Promise, Set등 자바스크립트 문법으로 지원되는 API를 의미한다.
"lib": ["ES2020", "DOM", "DOM.Iterable"],
//dom: setTimeout, console.log 등 dom에서 지원해주는 기능들을 사용하기 위함
jsx
- 타입스크립트 파일에서 작성된 jsx 문법이 자바스크립트 파일에서 어떻게 변환될지 결정할 수 있다.
- react : .js 파일로 컴파일 된다. (JSX 코드는 React.createElement() 함수의 호출로 변환됨)
- react-jsx : .js 파일로 컴파일 된다. (JSX 코드는 _jsx() 함수의 호출로 변환됨)
- react-jsxdev : .js 파일로 컴파일 된다. (JSX 코드는 _jsx() 함수의 호출로 변환됨)
- preserve : .jsx 파일로 컴파일 된다. (JSX 코드가 그대로 유지됨)
- react-native : .js 파일로 컴파일 된다. (JSX 코드가 그대로 유지됨)
"jsx": "react-jsx", // tsx 파일을 jsx로 어떻게 컴파일할 것인지 'preserve', 'react-native', 'react'
}
baseURL / paths
- baseURL속성은 import 구문의 모듈 해석 시에 기준이 되는 경로를 정한다.
- paths 속성은 특정 모듈을 임포트할 때 어디서 가져올지 경로를 지정할 수 있는 옵션이다.
- 노드 패키지 이외에도, 직접 만든 소스 파일을 import 시켜야 하는 때가 발생한다. 그래서 파일의 상단에는 다음과 같이 전역경로 와 상대경로 기준으로 각각 import 하게 된다.
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
types / typeRoots
- tsconfig는 기본적으로 node_modules 폴더를 제외하지만, 라이브러리의 타입을 정의해놓는 @types 폴더는 컴파일에 자동으로 경로에 포함된다. 그런데 만약 이 @types의 기본 경로를 변경하고 싶다면 아래와 같이 지정할 수 있다.
"compilerOptions": {
"typeRoots": ["./my-tslib"], // 컴파일 목록에 자동으로 포함시킬 패키지들의 기준 디렉토리
// .d.ts 파일을 읽을 폴더를 node_modules/@types에서 node_modules/my-tslib로 변경
"types": ["node", "jest", "express"], // typeRoots 디렉토리 내에 존재하는 패키지들 중 어떤 패키지들을 컴파일 목록에 포함시킬지
// 만약 types가 지정되어 있지 않다면 typeRoots에 지정된 경로의 패키지들은 전부 컴파일 목록에 자동으로 포함
}
allowJs
- TypeScript 프로젝트에서 JavaScript 파일도 사용할 수 있도록 하는 설정이다. allowJs: true이면 JavaScript 파일들도 타입스크립트 프로젝트에서 import 될 수 있다.
- 기본적으로 타입스크립트는 .js 확장자를 허용하지 않는다. 그래서 만일 자바스크립트를 타입스크립트로 바꾸는 프로젝트가 진행중이라면 곤란함을 겪게 된다. 따라서 이 속성은 JavaScript 프로젝트를 TypeScript 프로젝트로 바꾸려 할 때 점진적으로 변환하기 위한 용도로 사용된다.
"compilerOptions": {
"allowJs": true,
}
checkJs
- ts 파일 뿐만 아니라, js 파일에 있는 에러를 알려주는 옵션이다. 보통 allowJS 속성과 함께 사용된다.
"compilerOptions": {
"allowJs": true, // js 파일들 ts에서 import해서 쓸 수 있는지
"checkJs": true, // 일반 js 파일에서도 에러체크 여부
}
sourceMap
- 소스맵은 타입스크립트뿐만 아니라 프론트엔드 빌드 도구에서 흔하게 사용되는 기능으로써 디버깅 작업을 편하게 하는 역할을 한다.
- 타입스크립트로 빌드(컴파일)하면 자바스크립트 파일이 생성된다. 이때 자바스크립트 파일에서 실행 에러가 발생하면 자바스크립트 코드 위치를 가리키게 된다. 컴파일된 자바스크립트 파일은 이미 원본 파일인 타입스크립트 파일과 다른 파일이다. 따라서 자바스크립트 파일에서 특정 에러가 타입스크립트의 어느 코드와 연관이 있는지 알기 어렵다. 이 문제를 해결해주는 기능이 소스맵이다. 소스맵은 컴파일 결과물인 자바스크립트 파일에서 에러가 발생했을 때 해당 에러가 원본 파일의 몇 번째 줄인지 가리켜 준다.
"compilerOptions": {
"sourceMap": true, /* 소스맵 '.map' 파일 생성 설정 */
}
- 실제로 타입스크립트 프로젝트를 배포하고, 브라우저에서 개발자모드를 이용해 source 탭에 보면, 브라우저는 js만 인식하지만 매핑 파일에 의해 ts 파일을 인식하는걸 볼 수 있다. 이렇게 직접 타입스크립트 파일에 잘못된 부분이 있으면 직접 디버깅 할 수 있다.
strict
- strict 속성은 타입스크립트의 타입 체크 수준을 정의할 수 있는 옵션이다. 이 옵션을 쓰지않는것은 곧 타입스크립트를 쓰지 않는 다는 것과 같다. 따라서 기본으로 활성화 되어 있다.
"compilerOptions": {
// 다음 속성 하나만 켜면
"strict": true
// 다음 속성 목록 전부를 켠 것과 같음
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": true,
}
noImplicitAny
- 특정 코드의 타입이 정해져 있지 않은 경우 any 타입으로라도 타입 표기를 하는 옵션 속성이다. 타입스크립트는 특정 변수나 함수 파라미터 등 탕비이 정의되어 있지 않으면 암묵적으로 any 타입으로 추론한다.
**//"noImplicitAny": true 이면**
function getId(id) { // any로 추론함, 에러 발생x
return id;
}
**//"noImplicitAny": false이면,** 함수 파라미터 타입이 any로 표기되어 있지 않아 발생하는 타입 에러 발생
****function getId(id) { // 에러 발생
return id;
}
- 예를들어 타입스크립트가 추론을 실패해서 any로 지정되면 빨간줄이 뜨게 되는데, 이때 직접 any라고 지정해야 빨간줄이 사라진다.
"compilerOptions": {
"strict": true,
"noImplicitAny": false /* 명시적이지 않은 'any' 유형으로 표현식 및 선언 사용 시 오류 발생 */
}
strictNullChecks
- null및 undefined 값에 대한 유형을 조정하는 옵션이다.
- strickNullChecks를 적용하면, 모든 타입은 null, undefined값을 가질 수 없고 가지려면 union type으로 직접 명시해야 한다. 단, 기본적으로 any에 null, undefined할당 가능하며 void에는 undefined 할당 가능하다. 함수를 선언할 때부터 매개변수와 리턴 값에 정확한 타입을 지정할 수 있는 효과가 있다. 만일 strickNullChecks를 적용하지 않을 경우 모든 타입은 null, undefined값을 할당 가능해진다.
"compilerOptions": {
"strict": true,
"strictNullChecks": false, /* 엄격한 null 검사 사용 */
}
- 이 옵션은 웬만하면 활성화 해주는게 좋다. 다음과 같이 미리 에러를 잡아주기 때문이다.
alwaysStrict
- 컴파일된 자바스크립트 파일에 "use strict" 모드를 사용하도록 명시한다. strict 옵션이 활성화 되어있을 경우 기본적으로 이 옵션도 활성화 되며, 만일 이 옵션을 false로 지정하면 컴파일된 자바스크립트 파일에선 strict mode를 쓰지 않게 된다.
"compilerOptions": {
"strict": true,
"alwaysStrict": false, /* 엄격모드에서 구문 분석 후, 각 소스 파일에 "use strict" 코드를 출력 */
}
removeComments
- removeComments속성은 타입스크립트 컴파일을 할 때 주석을 제거해 주는 옵션이다. 타입스크립트 설정 파일에 따로 명시하지 않으면 기본적으로 false 값을 가진다.
{
"compilerOptions": {
"removeComments": false
}
}
- true로 키고 컴파일 한다면
// 주석
var a = 10;
var a =10;
- 이처럼 컴파일 결과물의 주석을 제거하기 때문에 파일 용량을 줄여주는 장점이 있다.
참고
728x90
반응형
LIST