⭐ tsconfig 파일의 역할은 타입스크립트 프로젝트의 설정을 관리하고 구성하는 것이다.
이 파일은 프로젝트의 루트 디렉토리에서 찾을 수 있으며, tsconfig.json이라는 이름으로 저장되어 있다.
➡️ 주요 역할
-
컴파일러 옵션 설정 : tsconfig.json 파일에서 타겟 JavaScript 버전, 모듈 시스템, 엄격한 타입 검사, 소스 맵 등과 같은 다양한 컴파일러 옵션을 설정할 수 있다. 따라서 타입스크립트 컴파일러가 자바스크립트로 출력할 때 사용할 설정을 지정할 수 있다.
-
포함 및 제외 파일 설정 : files, include, exclude와 같은 필드를 이용해서 프로젝트를 빌드할 때 컴파일 될 파일을 포함하거나 배제할 수 있다. 이를 통해 프로젝트를 빌드하고 전체 트랜스 파일링 프로세스를 더 세밀하게 제어할 수 있다.
-
작업 구성 및 확장 : 빌드 작업이 필요한 프로젝트 구조가 있을 때 references 필드를 사용하여 다른 타입스크립트 프로젝트에 대한 참조를 설정할 수 있다. 또한 extends를 사용하여 다른 tsconfig.json 파일의 설정을 상속하고 수정할 수 있다.
tsconfig의 역할은 타입스크립트의 설정을 관리하고 구성하는 것에 국한되어 있으며 주로 컴파일 옵션 및 포함/제외 파일 설정을 제어하는 데까지 역할을 한다.
주요 옵션 정리 (필요할 때마다 찾아보기)
1. files
프로젝트에서 컴파일할 파일들의 목록을 명시적으로 지정하는 속성이다.
files 속성은 밑의 exclude보다 우선순위가 높다. 만일 이 속성이 생략되면 include와 exclude속성으로 컴파일 대상을 결정한다.
{
"files" : [ // 파일 확장자까지 정확히 작성해줘야 한다.
"src/main.ts",
"src/utils.ts",
"src/types.d.ts"
]
}
//---------------------------------------------------------------------
2. extends
extends는 다른 tsconfig.json 파일의 설정들을 가져와 재사용할 수 있게 해주는 옵션이다. 보통 extends 속성은 tsconfig.json 파일의 최상위에 위치한다.
예를들어 config/base.json 파일의 속성 설정을 현 tsconfig.json 파일에 포맷이 맞으면 base파일의 설정을 상속 받게 된다.
// config/base.json
{
"compilerOptions" :{
"noImplicitAny" : true,
"strictNullChecks": true
}
}
{
"extends": "./configs/base",
"compilerOptions:{
"stricNullChecks":false
},
"files": [
"src/main.ts",
"src/utils.ts",
"src/types.d.ts"
]
}
//---------------------------------------------------------------------
3. 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/**/*.spect.ts" // test 디렉토리와 그 하위 디렉토리에 있는 모든 .spec.ts 파일
]
}
- 와일드 카드 패턴이란 tsconfig.json 파일에서 include나 exclude 속성에 사용할 수 있는 파일이나 디렉토리를 그룹화하여 일치시키는 기호라고 보면 된다.
- : 해당 디렉토리에 있는 모든 파일
? : 해당 디렉토리에 있는 파일들의 이름 중 한글자라도 포함하면 해당
\*\* : 해당 디렉토리의 하위 디렉토리의 모든 파일을 포함
4. exclude
exclude 속성은 프로젝트에서 컴파일 대상에서 제외할 파일들을 와일드 카드 패턴으로지정하는 속성이다. 즉, include의 반대 버전이라고 보면 된다.
{
"compilterOptions":{
...
},
"exclude": [
"node_modules", // node_modules 디렉토리를 제외
"**/*.test.ts" // 모든 .test.ts 파일을 제외
]
}
5. compilterOptions
컴파일 대상 파일들을 어떻게 변환할지 세세히 정하는 옵션이다.
{
"compilerOptions": {
/* 기본 옵션
* ------------------------------------------------------------------------------------------------------------------------------------------------ */
"incremental": true, /* 증분 컴파일 활성화 */
"target": "es5", /* ECMAScript 목표 버전 설정: 'ES3'(기본), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
"module": "esnext", /* 생성될 모듈 코드 설정: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
"lib": ["dom", "dom.iterable", "esnext"], /* 컴파일 과정에 사용될 라이브러리 파일 설정 */
"allowJs": true, /* JavaScript 파일 컴파일 허용 */
"checkJs": true, /* .js 파일 오류 리포트 설정 */
"jsx": "react", /* 생성될 JSX 코드 설정: 'preserve', 'react-native', or 'react'. */
"declaration": true, /* '.d.ts' 파일 생성 설정 */
"declarationMap": true, /* 해당하는 각 '.d.ts'파일에 대한 소스 맵 생성 */
"sourceMap": true, /* 소스맵 '.map' 파일 생성 설정 */
"outFile": "./", /* 복수 파일을 묶어 하나의 파일로 출력 설정 */
"outDir": "./dist", /* 출력될 디렉토리 설정 */
"rootDir": "./", /* 입력 파일들의 루트 디렉토리 설정. --outDir 옵션을 사용해 출력 디렉토리 설정이 가능 */
"composite": true, /* 프로젝트 컴파일 활성화 */
"tsBuildInfoFile": "./", /* 증분 컴파일 정보를 저장할 파일 지정 */
"removeComments": true, /* 출력 시, 주석 제거 설정 */
"noEmit": true, /* 출력 방출(emit) 유무 설정 */
"importHelpers": true, /* 'tslib'로부터 헬퍼를 호출할 지 설정 */
"downlevelIteration": true, /* 'ES5' 혹은 'ES3' 타겟 설정 시 Iterables 'for-of', 'spread', 'destructuring' 완벽 지원 설정 */
"isolatedModules": true, /* 각 파일을 별도 모듈로 변환 ('ts.transpileModule'과 유사) */
/* 엄격한 유형 검사 옵션
* ------------------------------------------------------------------------------------------------------------------------------------------------ */
"strict": true, /* 모든 엄격한 유형 검사 옵션 활성화 */
"noImplicitAny": true, /* 명시적이지 않은 'any' 유형으로 표현식 및 선언 사용 시 오류 발생 */
"strictNullChecks": true, /* 엄격한 null 검사 사용 */
"strictFunctionTypes": true, /* 엄격한 함수 유형 검사 사용 */
"strictBindCallApply": true, /* 엄격한 'bind', 'call', 'apply' 함수 메서드 사용 */
"strictPropertyInitialization": true, /* 클래스에서 속성 초기화 엄격 검사 사용 */
"noImplicitThis": true, /* 명시적이지 않은 'any'유형으로 'this' 표현식 사용 시 오류 발생 */
"alwaysStrict": true, /* 엄격모드에서 구문 분석 후, 각 소스 파일에 "use strict" 코드를 출력 */
/* 추가 검사 옵션
* ------------------------------------------------------------------------------------------------------------------------------------------------ */
"noUnusedLocals": true, /* 사용되지 않은 로컬이 있을 경우, 오류로 보고 */
"noUnusedParameters": true, /* 사용되지 않은 매개변수가 있을 경우, 오류로 보고 */
"noImplicitReturns": true, /* 함수가 값을 반환하지 않을 경우, 오류로 보고 */
"noFallthroughCasesInSwitch": true, /* switch 문 오류 유형에 대한 오류 보고 */
"noUncheckedIndexedAccess": true, /_ 인덱스 시그니처 결과에 'undefined' 포함 _/
/* 모듈 분석 옵션
* ------------------------------------------------------------------------------------------------------------------------------------------------ */
"moduleResolution": "node", /* 모듈 분석 방법 설정: 'node' (Node.js) 또는 'classic' (TypeScript pre-1.6). */
"baseUrl": "./", /* 절대 경로 모듈이 아닌, 모듈이 기본적으로 위치한 디렉토리 설정 (예: './modules-name') */
"paths": {}, /* 'baseUrl'을 기준으로 상대 위치로 가져오기를 다시 매핑하는 항목 설정 */
"rootDirs": [], /* 런타임 시 프로젝트 구조를 나타내는 로트 디렉토리 목록 */
"typeRoots": [], /* 유형 정의를 포함할 디렉토리 목록 */
"types": [], /* 컴파일 시 포함될 유형 선언 파일 입력 */
"allowSyntheticDefaultImports": true, /* 기본 출력(default export)이 없는 모듈로부터 기본 호출을 허용 (이 코드는 단지 유형 검사만 수행) */
"esModuleInterop": true, /* 모든 가져오기에 대한 네임스페이스 객체 생성을 통해 CommonJS와 ES 모듈 간의 상호 운용성을 제공. 'allowSyntheticDefaultImports' 암시 */
"preserveSymlinks": true, /* symlinks 실제 경로로 결정하지 않음 */
"allowUmdGlobalAccess": true, /* 모듈에서 UMD 글로벌에 접근 허용 */
/* 소스맵 옵션
* ------------------------------------------------------------------------------------------------------------------------------------------------ */
"sourceRoot": "./", /* 디버거(debugger)가 소스 위치 대신 TypeScript 파일을 찾을 위치 설정 */
"mapRoot": "./", /* 디버거가 생성된 위치 대신 맵 파일을 찾을 위치 설정 */
"inlineSourceMap": true, /* 하나의 인라인 소스맵을 내보내도록 설정 */
"inlineSources": true, /* 하나의 파일 안에 소스와 소스 코드를 함께 내보내도록 설정. '--inlineSourceMap' 또는 '--sourceMap' 설정이 필요 */
/* 실험적인 기능 옵션
* ------------------------------------------------------------------------------------------------------------------------------------------------ */
"experimentalDecorators": true, /* ES7 데코레이터(decorators) 실험 기능 지원 설정 */
"emitDecoratorMetadata": true, /* 데코레이터를 위한 유형 메타데이터 방출 실험 기능 지원 설정 */
/* 고급 옵션
* ------------------------------------------------------------------------------------------------------------------------------------------------ */
"skipLibCheck": true, /* 선언 파일 유형 검사 스킵 */
"forceConsistentCasingInFileNames": true /* 동일한 파일에 대한 일관되지 않은 케이스 참조를 허용하지 않음 */
}
}
▲ target :
target 프로퍼티는 TypeScript를 컴파일할 JavaScript 버전을 지정한다. 환경에 따라 낮은 버전이나 높은 버전을 선택할 수 있다. 기본값은 ES5이며, ES5에서 지원하지 않는 기능을 사용할 때 주의해야 한다. 대부분의 브라우저는 ES6를 지원하므로 주로 사용되며, target 프로퍼티는 lib 프로퍼티의 기본값을 결정한다. ESNext 옵션은 TypeScript 버전에 따라 달라질 수 있는 최신 자바스크립트 버전을 나타내므로 주의해야 한다.
"compilerOptions": {
"target": "ES6" // 어떤 버전의 자바스크립트로 컴파일 될 것인지 설정
// 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능
}
▲ lib :
lib 옵션은 JavaScript 내장 라이브러리(예: Math API, document API)에 대한 타입 정의를 지정한다. lib 프로퍼티가 지정되지 않으면 target 프로퍼티에 따라 필요한 타입 정의 정보가 자동으로 지정된다. 예를 들면, ES6 이상의 target 프로퍼티가 설정되어 있지만 lib이 지정되지 않으면 자동으로 필요한 라이브러리 타입(예: ES2015)이 전역 참조에 포함된다.
- lib 프로퍼티를 지정하지 않을 때 자동으로 설정되는 값은 다음과 같다.
* target이 es3이면 디폴트로 lib.d.ts를 사용
* target이 es5이면, 디폴트로 dom, es5, scripthost를 사용
* target이 es6이면, 디폴트로 dom, es6, dom.iterable, scripthost를 사용
"compilerOptions": {
"lib": ["es5", "es2015.promise", "dom"], // 컴파일 과정에 사용될 라이브러리 파일 설정
/_
es5: global type을 사용하기 위함 (Array, Boolean, Function 등..)
es2015.promise: Promise를 사용하기 위함
dom: setTimeout, console.log 등 dom에서 지원해주는 기능들을 사용하기 위함
_/
}
▲ experimentalDecorators / emitDecoratorMetadata
타입스크립트의 @Decorator를 사용하기 위해서는 true로 둬야 작동된다.
"compilerOptions": {
"experimentalDecorators": true /_ ES7 데코레이터(decorators) 실험 기능 지원 설정 _/
"emitDecoratorMetadata": true /_ 데코레이터를 위한 유형 메타데이터 방출 실험 기능 지원 설정 _/
}
\*\* 이런식으로 @Decorator 사용
function methodDecorator() {
console.log('method');
return function (target: any, property: any, descriptor: any) {};
}
function propertyDecorator(writable: boolean = true) {
console.log('property');
return function (target: any, decoratedPropertyName: any): any {};
}
class Test {
@propertyDecorator()
property = 'property';
@methodDecorator()
test(param1: string) {
console.log('test1');
}
}
▲ jsx
.tsx 확장자의 컴파일 결과 JSX 코드를 어떻게 컴파일 할지 결정한다.
react : .js파일로 컴파일 된다. (JSX 코드는 React.createElement() 함수의 호출로 변환됨)
react-jsx : .js파일로 컴파일 된다. (JSX 코드는 \_jsx()함수의 호출로 변환됨)
react-jsdev : .js파일로 컴파일 된다. (JSX 코드는 \_jsx()함수의 호출로 변환됨)
preserve : .jsx 파일로 컴파일 된다. (JSX 코드가 그대로 유지됨)
react-native : .js 파일로 컴파일 된다. (JSX 코드가 그대로 유지됨)
"compilerOptions": {
"jsx": "preserve" // tsx 파일을 jsx로 어떻게 컴파일할 것인지 'preserve', 'react-native', 'react'
}
// --------------------------------------------------------------
※ Modules 옵션
▲ rootDir
루트 디렉토리 기준을 변경한다. js 아웃풋 경로에 영향을 줄 수 있다.
▲ module / moduleResolution
프로그램에서 사용할 모듈 시스템을 결정한다.
만일 import 구문을 es6로 컴파일 했을 때, 동일하게 import로 컴파일되어 commonJS 환경의 node로 실행시 오류가 발생할 수도 있다.
따라서 import 구문을 require 구문으로 컴파일을 해줘야할 때 module의 속성값을 comonJS로 지정하면 된다.
CommonJS (target 프로퍼티가 ES3 혹은 ES5로 지정되었을 때의 기본값)
ES6/ES2015 (target 프로퍼티가 ES6 혹은 그 이상의 버전으로 지정되었을 때의 기본값)
나머지 (ES2020, ESNext, AMD, UMD, System, None)
"compilerOptions": {
"module": "commonjs", /_ 생성될 모듈 코드 설정: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. _/
"moduleResolution": "node", /_ 모듈 분석 방법 설정: 'node' (Node.js) 또는 'classic' (TypeScript pre-1.6). _/
}
▲ baseURL/ paths
import 구문의 모듈 해석 시에 기준이 되는 경로를 지정한다.
개발을 하다 보면, 노드 패키지 이외에도, 직접 만든 소스 파일을 import 시켜야 하는 때가 발생한다. 그래서 파일의 상단에는 다음과 같이 전역 경로와 상대경로 기준으로 각각 import 하게 된다.
import styled from "styled-components";
// 노드 패키지일 경우 최상단 경로에 있는 node_modules 폴더를 자동 인식
import {TextField} from "../../../../components/textfield"
// 직접 만든 사용자 소스 파일이 있는 경우 상대경로로 가져와야 한다.
상대 경로로 import하는 것은 작동하지만 프로젝트 확장이나 리팩터링 시 문제가 발생할 수 있다. 상대 경로는 현재 파일 위치에 따라 달라지므로 다른 경로에서 동일한 모듈을 import하려면 번거롭다. 이를 해결하기 위해 baseUrl과 paths 속성을 사용해 절대 경로로 import할 수 있다. 이렇게 하면 깔끔하게 작성할 수 있다.
import styled from 'styled-components';
import { TextField } from '@components/textfield';
이렇게 말이다.
첫번째로 baseUrl 속성에 기본 경로를 설정해주고, 그 바로 아래에 paths 속성에 절대 경로를 지정하고 싶은 경로들을 지정해 주면 된다. 추가적으로 outDir도 설정해준다.
{
"compilerOptions":{
"baseUrl" : "./",
"paths" : {
"@components/_" : [
"src/components/_"
// import {} from '@components/파일' 할 때 어느 경로로 찾아들어갈지
]
"@utils/_" : [
"src/utils/_"
],
},
"outDir" : "./dist", // 컴파일할 때 js 파일 위치 경로 지정
}
}
그러나 실제 ts-node를 이용해 소스 파일을 실행해보면 오류가 난다.
왜냐하면 tsconfig.json 설정은 경로 alias만 준것이지 실제 경로를 바꾼게 아니기 때문이다.
따라서 별도로 tsconfig-paths 와 tsc-alias 라는 모듈이(을?) 설치해 주어야 한다.
[tsconfig-paths]
tsconfig.json 내에 baseurl이나 paths 필드에 명시된 모듈을 실제로 호출하게 도와주는 라이브러리
[tsc-alias]
js 파일로 컴파일되면 baseurl이나 paths 필드로 명시된 경로가 그대로 트랜스파일링 되서 js 모듈을 인식할 수 없는 현상이 일어나게 되는데, 이 패키지를 이용하면 컴파일된 경로를 상대 경로로 바꿔서 해결 가능
{
"compilerOptions" : {
"baseUrl" : "./"
"path":...
}
// 전역 속성으로 추가해준다.
"ts-node": {
"require" : ["tsconfig-paths/register"]
}
}
그리고 ts-node index.ts 명령어를 실행해보면, @경로를 잘 찾아들어가는 걸 확인할 수 있다. 배포환경의 빌드 같은 경우, 컴파일 명령어를 다음과 같이 하면 된다.
▲ types / typeRoots
tsconfig는 기본적으로 node_modules 폴더를 제외하지만, 라이브러리의 타입을 정의해놓은 @types 폴더는 컴파일에 자동으로 경로에 포함된다. 그런데 만약 이 @types의 기본 경로를 변경하고 싶다면 아래와 같이 지정할 수 있다.
"compilterOptions" : {
"typeRoots" : ["./my-tslib"],
// 컴파일 목록에 자동으로 포함시킬 패키지들의 기준 디렉토리
// .d.ts 파일을 읽을 폴더의 node_modules/@types에서 node_modules/my-tslib로 변경
"types" : ["node","jest","express"],
// typeRoots 디렉토리 내에 존재하는 패키지들 중 어떤 패키지들을 컴파일 목록에 포함시킬지
// 만약 types가 지정되어 있지 않다면 typeRoots에 지정된 경로의 패키지들은 전부 컴파일 목록에 자동으로 포함
}
▲ resolveJsonModule
확장자가 .json인 모듈의 import를 허용하는 설정이다. 생각해 보면 Node.js 자바스크립트 프로젝트에서 json 설정 파일을 import 해서 자주 사용해온 걸 떠올릴 것이다. 타입스크립트도 가능할 것이라 생각하지만, json의 프로퍼티들을 싹다 타입을 지정해야 사용이 가능하다.
이 옵션은 json의 타입을 자동으로 설정해줘서 따로 변환 작업 없이 타입스크립트에서 json 파일 데이터들을 곧바로 사용할 수 있도록 해준다.
예를 들어 다음과 같은 json 데이터가 있다고 하자.
{
"name" : "홍길동",
"age" : 54,
"height" : 170,
"married" : false
}
원래라면 ts파일에서 사용할 수 없게 막혀있다.
resolveJsonModule 옵션을 true로 설정해주면, 다음과 같이 자동으로 타입이 매핑되어 사용이 가능해진다.
"compilerOptions" : {
"resolveJsonModule" : true // ts 파일에서 json import 허용
}
// 이렇게 사용 가능
import settings from "./test.json"
// ------------------------------------------------------------------------
※ Interop Constraints 옵션
▲ esModuleInterop
라이브러리 중에서는 amd(웹) 방식을 전제로 구현된 라이브러리가 있는데 commonjs 방식으로 동작하는 TS에서는 혼란을 줄 수 있다. 상호 운용적(interoperable)으로 사용하기 위해서는 가능한 true로 지정해 놓고 타입스크립트 코딩을 하는 것
"compilerOptions" : {
"esModuleInterop" : true,
// 모든 가져오기에 대한 네임스페이스 객체 생성을 통해 CommonJS와 ES 모듈 간의 상호 운용성을 제공
}
// esModuleInterop : true일 경우 가능함
import React from "react";
// false인 경우 다음과 같이 import 해야함
import \* from React from "react";
▲ forceConsistentCasingInFileNames
파일의 이름을 대소문자 판별하는 게 옵션,
프로그래밍 세계에선 같은 알파벳이라도 대소문자를 모두 구분하기 때문에
이 옵션은 가능한 true로 해놓고 사용하기를 권장
// -----------------------------------------------------------------------------
※ JavaScript Support 옵션
▲ allowJs
TS 프로젝트에서 js파일도 사용할 수 있도록 하는 설정이다.
allowJs: true이면 JavaScript 파일들도 타입스크립트 프로젝트에서 import 될 수 있다.
기본적으로 타입스크립트는 .js 확장자를 허용하지 않는다. 그래서 만일 자바스크립트를 타입스크립트로 바꾸는 프로젝트가 진행중이라면 곤란함을 겪게 된다. 따라서 이 속성은 JavaScript 프로젝트를 TypeScript 프로젝트로 바꾸려할 때 점진적으로 변환하기 위한 용도로 사용된다.
"compilerOptions" : {
"allowJs" : true,
}
▲ checkJs
ts파일 뿐만 아니라 js파일에 있는 에러도 보고하라는 옵션이다. 보통 allowJS속성과 함께 사용된다.
"compilerOptions" : {
"allowJs" : true, // js 파일들을 ts에서 import해서 쓸 수 있는지
"checkJs" : true, // 일반 js 파일에서도 에러체크 여부
}
// ------------------------------------------------------------
※ Emit 옵션
▲ outFile
일반적인 형태로는 하나의 파일을 만들 수 없지만, 번들러 형태로 지원하여 하나로 만든다.
단, 모듈이 시스템 혹은 amd와 같은 형태로 지원되어야 파일을 하나로 만들 수 있어서, 차라리 따로 웹팩을 사용하지 이 기능을 이용하지는 않아 중요도 낮은 옵션이다.
▲ outDir
기본적으로 컴파일을 진행하면 .ts와 같은 경로에 .js 결과물을 생성하는데, outDir 옵션으로 경로를 수정하여 컴파일된 js 파일들을 담을 폴더를 지정해 줄 수 있다.
"compilterOptions" : {
"outDir" : "./dist"
}
▲ noEmit
타입스크립트를 컴파일하면, 자바스크립트 변환 파일을 만들어 내지 않도록 하는 설정이다.
이는 곧 타입스크립트 에디터 통합 기능을 제공하기 위한 도구 혹은 소스 코드 타입 체커로만 사용하게 되는 꼴이 된다.
만일 Babel이나 swc와 같은 또다른 도구가 변환하는 작업을 대신 담당하는 경우 사용되는 옵션이라고 이해하면 된다.
"compilerOptions" : {
"noEmit" :true,
}
▲ sourceMap
컴파일된 파일 디렉터리에 .js.map 파일이 만들어진다.
이 소스맵 파일은 변환된 js코드가 ts의 어디에 해당하는 지를 알려준다.
디버깅 작업에 매우 유용하다.
"compilerOptions" : {
"sourceMap" : true, // 소스맨 '.map' 파일 생성 설정
}
▲ downlevelInteration
타입스크립트에서 제너레이터 function\* {}, yeild... 를 사용하기 위한 옵션
코드를 이전 버전의 js로 컴파일하고 for loop로 작업하면 컴파일이 제대로 작동하지 않을 수 있어, 이 속성을 설정해 놓으면 정확도가 올라가지만, js코드량이 늘어나기 때문에 의도한대로 loop가 작동하지 않을 때만 권함
"compoilerOptions" : {
"downlevelInteration" : true,
}
▲ removeComments
컴파일 시 타입스크립트 소스의 주석을 모두 제거하는 것을 설정한다.
"compilerOptions" : {
removeComments" : true, // true면 컴파일된 js에 기존의 주석을 모두 제거
}
▲ noEmitOnError
원래는 타입스크립트에 구문 에러가 발생하더라도, 컴파일하면 js파일을 생서하는데 위 설정을 true로 설정하면 에러가 발생한 ts 파일은 컴파일을 막는다.
"compilerOptions" : {
"noEmitOnError" : true, // 컴파일 에러가 있으면 js 컴파일 하지 않음
}
▲ declaration
이 옵션을 true로 하면 TS 파일을 JS로 컴파일하는 과정에서 JS 파일과 함께 d.ts 파일이 생성되게 한다.
객체랑 함수를 쓰다보면 타입을 커스텀하는 경우가 온다. 이때 타입들을 ts파일에 넣어도 되지만 용도가 다르기 때문에 분리하는 것이 좋다. 그럴 때 d.ts 파일을 만들어 따로 타입만을 관리하는데 이럴 때 사용되는 옵션이다.
// --------------------------------------------------------------------
※ Type Checking 옵션
strict
타입스크립트의 각종 타입 체킹 동작을 전부 활성화한다.
사실상 이 옵션을 쓰지 않는 것은 곧 타입스크립트를 쓰지 않는다는 것과 같다.
따라서 기본으로 활성화 되어 있다.
"compilerOptions" : {
"strict" : true // 모든 엄격한 유형 검사 옵션 활성화
}
이 프로퍼티를 true로 지정하면 strict mode family 프로퍼티들을 전부 true로 지정하는 것과 동일하다.
[strict mode family 프로퍼티들]
- alwaysStrict 프로퍼티
- strictNullChecks 프로퍼티
- strictBindCallApply 프로퍼티
- strictFunctionTypes 프로퍼티
- strictPropertyInitialization 프로퍼티
- noImplicitAny 프로퍼티
- noImplicitThis 프로퍼티
▲ noImplicitAny
명시적이지 않은 any 타입이 지정될 경우 표현식과 선언에 사용하면 에러 발생 시킨다.
예를 들어 타입스크립트가 추론을 실패해서 any로 지정되면 빨간줄이 뜨는데, 이때 직접 any라고 지정해야 빨간 줄이 사라진다.
위의 strict 옵션을 true로 하면 noImplicitAny 옵션도 자동으로 true가 되서 나타나는 현상인데, 이때 이 옵션을 false로 지정하면 아래와 같이 any 타입을 명시적으로 지정 안해도 오류가 사라지게 된다.
"compilerOptions" : {
"strict": true,
"noImplicitAny" : false
// 명시적이지 않은 'any'유형으로 표현식 및 선언 사용시 오류 발생
}
function methodDecoratior() {
console.log('method');
return function (target, property, descriptor) {};
// noImplicitAny를 false로 하면, 명시적 any를 안써도 에러가 안난다.
}
▲ suppressImplicitAnyIndexErrors
noImplicitAny를 사용할 때 인덱스 객체에 인덱스 시그니처가 없는 경우 오류가 발생하는 것을 예외 처리 해준다.
예를 들어 suppressImplicitAnyindexErrors 옵션을 true로 설정해주면, person 객체에 age라는 프로퍼티가 없어도 person['age']를 에러를 내주지 않는다.
"compilerOptions" : {
"strict" : true,
"suppressImplicitAnyIndexErrors": true,
}
const person = {
name : "홍길동",
}
console.log(person['age'])
// suppressImplicitAnyIndexErrors : true로 하면 그냥 undefined를 출력한다.
// 에러를 내진 않음
▲ noImplicitThis
암시적 any 유형이 있는 this 표현식에서 오류를 발생시킨다.
본래라면 명시적 this를 통해 오류를 해결하지만, this에 any가 오는 걸 허용한다면 이 옵션을 false로 지정해주어 빨간줄을 지울 수 있다.
"compilerOptions" : {
"strict" : true,
"noImplicitThis" : false
}
class Rectangle {
width : number;
height : number;
constructor(width : number, height : number) {
this.width = width;
this.height = height;
}
getAreaFunciton() {
return function() {
return this.width * this.height ;
// 우너래는 명시적 this를 써야하지만, 'noImplicitThis": false하면 안써줘도 된다.
}
}
}
▲ strictNullChecks
null및 undefined 값에 대한 유형을 조정하는 옵션이다.
strickNullChecks를 적용하면, 모든 타입은 null, undefined 값을 가질 수 없고 가지려면 union type으로 직접 명시해야 한다.
단, 기본적으로 any에 null, undefined 할당 가능하며 void에 undefined 할당 가능하다.
함수를 선언할 때부터 매개변수와 리턴 값에 정확한 타입을 지정할 수 있는 효과가 있다.
만일 strickNullChecks를 적용하지 않을 경우 모든 타입은 null, undefined값을 할당 가능해진다.
"compilerOptions" : {
"strict" : true,
"strictNullChecks" : false, // 엄격한 null 검사 사용
}
▲ stirctFunctionTypes \*\*
타입스크립트는 기본저긍로 공변적인 규칙을 따르지만, 함수의 매개변수 만이 이변량의 구조를 가진다. 따라서 매개변수 타입이 달라도 막 대입할 수 있는 현상이 일어나게 되는데, 이를 반공변적으로 설정해 주어 이변성의 오류를 해결한다. 하지만 자바스크립트에선 서로의 콜백을 함수에 인자로 전달하는 일이 빈번하기 때문에 오히려 이런 옵션이 활성화 되있는 게 거슬릴 수 있는데, 이 옵션을 false로 하면 반공변성을 끌 수 있다.
"compilerOptions" : {
"strict" : ture,
"strictFunctionTypes" : false // 엄격한 함수 유형 검사 사용
}
function fn(x: string) {
console.log('Hello, ' + x.toLowerCase());
}
type StringOrNumberFunc = (ns : stirng | number) => void;
▲ strictPropertyInitailization
정의되지 않은 클래스의 속서잉 생성자에게 초기화 되었는지 확인한다.
예를 들어 UserAccount 클래스의 constructor에서는 name 프로퍼티만 초기화 해주고,
email 프로퍼티는 선언만 하였는데, 이때 너무 강하게 타입 체킹하는 느낌이 든다면 이 옵션을 false로 줘서 빨간줄을 해결할 수 있다.
"compilerOptions" : {
"strict" : true,
"strictPropertyInitialization" : false,
// 클래스에서 속성 초기화 엄격 검사 사용
}
class UserAccount {
name : string;
accountType = "user";
address : string | undefined;
email : string
// strictPropertyInitialization : false로 하면 빨간줄이 사라진다.
construtor(name : string) {
this.name = name;
}
}
class UserAccount {
name : string;
accountType = "user";
address : string | undefined;
email : string;
constructor(name : string) {
this.name = name;
}
}
▲ strictBindCallApply
function의 내장 함수인 bind, call, apply를 사용할 때 더욱 엄격하게 검사하는 옵션
"compilerOptions" : {
"strict" : true,
"strictBindCallApply" : false
// 엄격한 "bind", "call", "apply" 함수 메서드 사용
}
function fn(x : string) {
return parseInt(x);
}
const n1 = fn.call(undefined, '10')
const n2 = fn.call(undefined, false)
function fn(x: string) {
return parseInt(x);
}
▲ alwaysStrict
컴파일된 자바스크립트 파일에 "use strict" 모드를 사용하도록 명시한다.
strict 옵션이 활성화 되어있을 경우 기본적으로 이 옵션도 활성화 되며, 만일 이 옵션을 false로 지정하면 컴파일된 자바스크립트 파일에선 strict mode를 쓰지 않게 된다.
"compilerOptions" : {
"strict" : true,
"alwaysStrict" : false,
// 엄격모드에서 구문 분석 후, 각 소스 파일에 "use strict"코드를 출력
}
※ Completeness 옵션
▲ skipLibCheck
타입 체킹을 스킵하도록 하는 설정이다. 이 옵션을 true로 지정하여 선언 파일들의 타입 체크를 생략하도록 하여 컴파일 시간을 줄여주도록 하기 위한 속성이다.
"compilerOptions" : {
"skipLibCheck" : true, // 선언 파일 유형 검사 스킵
}
프론트엔드 개발자입니다 :)