TSconfig 정리
typescript + Rollup + gulp 환경을 구성하여 UMD 형식의 모듈을 지원하는 자바스크립트 라이브러리를 개발하고자 한다.
이 과정 중 typescript 의 컴파일 옵션에 대해 정리할 필요성을 느끼고 작성하였음.
기본적으로 typescript는 컴파일 과정을 통해 JS파일을 생성한다.
이때, tsconfig 를 통해서 옵션을 핸들링 할 수 있다.
작성일 / 2021-12-20
{
"files": ["core.ts"], /* 프로그램에 포함할 파일의 이름 배열, (glob 지원 x) */
"extends": "./config/base.json", /* 설정파일 상속(확장) */
"include": ["src/**/*"], /* 프로그램에 포함할 파일의 이름 또는 패턴 배열 allowJs가 true인 경우, .js 및 .jsx 포함 */
"exclude": [], /* include에서 제외할 파일 이름 또는 패턴 배열 */
"references": [ /* 디렉터리 별 tsconfig.json을 구성할 수 있음 */
{ "path": "../src/" } /* 참고 : https://stackoverflow.com/questions/51631786/how-to-use-project-references-in-typescript-3-0 */
],
"compilerOptions": { /* 컴파일 옵션 */
/* 타입 체크 관련 */
"allowUnreachableCode": undefined, /* 연결할 수 있는 코드 허용 undefined: 해당 코드를 에디터 경고 / true: 해당 코드 제외 / false: 컴파일시 에러 발생 */
"allowUnusedLabels": undefined, /* 미사용 라벨(변수) 허용 */
"alwaysStrict": true, /* ECMAScript strict mode 사용 */
"exactOptionalPropertyTypes": true, /* type과 interface에서 '?' 허용 여부 */
"noFallthroughCasesInSwitch": true, /* switch 문 내부의 비어있지 않은 모든 경우에 braek 또는 returndl 포함되도록 */
"noImplicitAny": true, /* any 타입 변수에 대한 접근 비허용 여부 strict시 true */
"noImplicitOverride":true, /* 매서드 override시 override 키워드 사용 */
"noImplicitReturns":false, /* 함수의 값 반환 여부를 확인 */
"noImplicitThis":true, /* 메서드 내에서 this의 값이 해당 클래스 인스턴스인지 확인 */
"noPropertyAccessFromIndexSignature": false, /* 인덱스 서명을 사용하더라도, 정의되지 않은 키에 대한 접근 에러 처리 */
"noUncheckedIndexedAccess": false, /* 인덱스 서명을 사용한 속성의 타입 추론을 undefined로 처리 */
"noUnusedLocals": false, /* 사용하지 않은 지역 변수에 대해 오류 표시 */
"noUnusedParameters": false, /* 사용하지 않은 파라미터에 대해 오류 표시 */
"strict": false, /* 타입스크립트에서의 엄격한 검사(strict 옵션)에 대해서 모두 체크여부, 향후 업데이트시 엄격한 검사가 추가되는 경우 기존코드에서도 에러가 발생될 수 있음. */
"strictBindCallApply": false, /* call,bind,apply시 타입 검사 여부 */
"strictFunctionTypes": false, /* function 파라미터에 대해 좀더 엄격한 검사 ex) union을 통한 멀티타입에 대해서 한가지타입만 선언되어있는 경우 에러 */
"strictNullChecks": false, /* null, undefined 리턴할수 있는 함수 호출 값에 대한 메서드 사용시 로직상 null 체크 여부를 확인 */
"strictPropertyInitialization": false, /* 클래스 속성에 선언되어있지만 생성자 함수에서 설정되지 않은 경우 에러 */
"useUnknownInCatchVariables": true, /* catch문 안에서의 변수를 any에서 unknown으로 사용할 수 있도록 */
/* 모듈 */
"allowUmdGlobalAccess": false, /* 모듈에서 전역 UMD 접근을 허용 */
"baseUrl": "./src", /* import/export시 기준이 될 폴더 */
"module": "umd", /* 프로그램 모듈 시스템 설정 */
"moduleResolution": "classic", /* 모듈 해석 전략에 대한 지정 */
"noResolve": false, /* 모듈 접근시 import/reference 미사용 */
"paths": {
"jquery": ["node_modules/jquery/dist/jquery"] /* this mapping is relative to "baseUrl"*/
},
"resolveJsonModule": false, /* json 파일에 대한 모듈 접근 */
"rootDir": "./src/core", /* 컴파일시 입렉디렉터리와 동일한 디렉터리를 유지할 수 있음*/
"rootDirs":["./src/core","./some/thing"], /* 다른 경로의 디렉터리를 하나의 디렉터리처럼 접근할 수 있도록 처리할 수 있음 */
"typeRoots": ["./typings", "./vendor/types"], /* @types를 명시 */
"types": ["node","jest"], /* 패키지의 @types을 명시*/
/* Emit(방출) */
"declaration": true, /* d.ts파일 생성 여부 */
"declarationDir": "./types", /* 생성될 d.ts파일 경로 지정 */
"declarationMap": false, /* d.ts파일에 대한 sourcemap 생성 여부 */
"downlevelIteration": false, /* iterator에 대한 처리 예) for..of 시 트랜스파일링 처리*/
"emitBOM": false, /* BOM(바트 순서 표식) 표시 여부 */
"emitDeclarationOnly": false, /* d.ts 파일만 generate */
"importHelpers": false, /* 도우미 함수 사용시 tslib에서 가져와 처리, downlevelIteration 옵션과 연관 */
"importsNotUsedAsValues": "remove", /* 사용하지 않는 import문 제어 (remove, preserve, error) */
"inlineSourceMap": false, /* inline-source-map 사용시 */
"inlineSources": false, /* ts 원본은 sourcemap으로 포함..? */
"newLine": "lf", /* 개행문자 설정 */
"noEmit": false, /* 출력 파일 생성 여부, babel 또는 swc와 같은 도구가 ts파일을 js 환경 내에서 처리할 공간을 생성 */
"noEmitHelpers": false, /* importHelpers로 도우미함수를 가져오는 대신 해당 함수에 대한 출력을 제어함(유틸함수 포함/미포함) */
"noEmitOnError": false, /* 오류가 있는 소스코드는 방출시 포함하지 않도록 */
"outDir": "./dist", /* 생성될 파일의 디렉터리 설정 */
"outFile": "singleFile", /* module이 none, system, amd인 경우만 지원, 지정된 단일 출력 파일 */
"preserveConstEnums": true, /* const enum에 대한 처리 */
"preserveValueImports": false, /* 추적할수 없는 import 모듈에 대한 처리.. 참조: https://www.typescriptlang.org/tsconfig#preserveValueImports */
"removeComments": true, /* 주석 삭제 옵션 */
"sourceMap": false, /* sourcemap file 생성 옵션 */
"sourceRoot": "https://my.com/debug/source/", /* source 경로 옵션 */
"stripInternal": false, /* 주석에 @internal 있는 경우 해당 소스코드는 포함하지 않음 */
/* JavaScript Support */
"allowJS": true, /* js파일 사용 여부 */
"checkJS": true, /* js파일에 대한 검사 */
/* Editor Support */
"disableSizeLimit": false, /* typescript 메모리할당에 대한 제한을 해제 */
"plugins": false, /* 에디터 관련 플러그인 .. */
/* Interop Constraints */
"allowSyntheticDefaultImports": false, /* export하지 않은 함수를 export된것처럼 처리.. 타입검사에서만 적용됨 */
"esModuleInterop": true, /* commonjs방식과 amd방식에서의 차이에 대한 오류 처리 */
"forceConsistentCasingInFileNames": false, /* 파일 참조시 대소문자 구분 여부 */
"isolatedModules": true, /* 단일 파일 변환 프로세스에서 올바르게 해석할 수 없는 특정코드를 작성할 경우 경고 */
"preserveSymlinks": false, /* 심볼릭 링크에 대한 주소확인 옵션 */
/* Language and Environment */
"emitDecoratorMetadata": false, /* reflect-metadata와 함께 작동하는 데코레이터? */
"experimentalDecorators": false, /* 위 옵션과 연관 */
"jsx": "preserve", /* tsx파일이 js파일로 컴파일되는 옵션 제어 */
"jsxFactory": "", /* component 생성 함수에 대한 참조 지정 기본값 React.createElement */
"jsxFragmentFactory": "", /* Fragment에 참조 지정 */
"jsxImportSource": "", /* 런타임시 참조할 jsx 팩토리함수 지정 */
"lib": ["es5","dom"], /* es문법 및 DOM의 type 정의 */
"noLib": false, /* lib 미사용 */
"target": "es5", /* 보장될 js env 버전 */
"useDefineForClassFields": false, /* 타겟 es2022/ESNext에서 적용될 class field로 적용 여부.. */
/* Compiler Diagnostics */
"diagnostics": false, /* 컴파일시 진단 정보(로그?) 출력 여부 */
"explainFiles": false, /* ts가 프로젝트로 인식하는 파일의 이름과 이유 출력 */
"extendedDiagnostics": false, /* 컴파일 시간 분석 */
"generateCpuProfile": false, /* cpu 프로플 출력 여부 */
"listEmittedFiles": false, /* 생성될 파일 목록 출력 */
"listFiles": false, /* 컴파일 대상 파일 목록 출력 */
"traceResolution": false, /* 각 파일에 대한 프로세스 정보 출력 */
}
}
추가적으로, type definition을 도와주는 *.d.ts을 생성할 수 있는데 해당 파일들을 bundle하기 위해서는 1차적으로 compile과정을 거쳐 각 파일에 대한 d.ts파일을 생성한 후 다른 모듈을 통해 번들링을 진행해야하는 것으로 보임.
