Typescript tsconfig.json 옵션들 톺아보기

반응형

Typescript로 프로젝트를 진행하다보면 정말 많은 tsconfig 옵션을 만날 수 있습니다. 실제로 그중에서 사용하는 옵션은 몇개 안되고, 주석이 되어 있는데, 우리가 많이 사용하는 옵션들과 잘 사용하지 않는 옵션들에 대해서 한번 살펴봅시다.

tsc --init 할 때, 활성 되는 옵션

• target: JavaScript 코드의 ECMAScript 버전을 설정하는 데 사용됩니다
  • "es3": ECMAScript 3 (ES3) 버전을 대상으로 합니다. 이는 가장 오래된 ECMAScript 버전으로, 모든 브라우저에서 지원됩니다.
  • "es5": ECMAScript 5 (ES5) 버전을 대상으로 합니다. ES5는 ES3의 확장으로, IE 9 및 모던 브라우저에서 지원됩니다.
  • "es2015" 또는 "es6": ECMAScript 2015 (ES6) 버전을 대상으로 합니다. ES6는 JavaScript에 중요한 변화를 가져온 첫 번째 큰 업데이트입니다. 모던 브라우저와 Node.js의 최신 버전에서 지원됩니다.
  • "es2016": ECMAScript 2016 (ES2016) 버전을 대상으로 합니다. ES2016은 ES6 이후의 연도별 업데이트로, 주로 새로운 기능과 문법 개선을 포함합니다.
  • "es2017": ECMAScript 2017 (ES2017) 버전을 대상으로 합니다. ES2017은 ES2016 이후의 연도별 업데이트로, 비동기 함수, 객체 프로퍼티 순서 보장 등의 새로운 기능을 도입했습니다.
  • "es2018": ECMAScript 2018 (ES2018) 버전을 대상으로 합니다. ES2018은 ES2017 이후의 연도별 업데이트로, 비동기 반복자, 정규 표현식 개선 등의 새로운 기능을 도입했습니다.
  • "es2019": ECMAScript 2019 (ES2019) 버전을 대상으로 합니다. ES2019은 ES2018 이후의 연도별 업데이트로, Array.prototype.{flat,flatMap} 등의 새로운 기능을 도입했습니다.
  • "es2020": ECMAScript 2020 (ES2020) 버전을 대상으로 합니다. ES2020은 ES2019 이후의 연도별 업데이트로, BigInt, Promise.allSettled 등의 새로운 기능을 도입했습니다.
  • "es2021": ECMAScript 2021 (ES2021) 버전을 대상으로 합니다. ES2021은 ES2020 이후의 연도별 업데이트로, 옵셔널 체이닝 연산자 ?., Null 병합 연산자 ?? 등의 새로운 기능을 도입했습니다.
• module: 컴파일된 JavaScript 코드에서 모듈 시스템을 어떻게 사용할지를 지정합니다
  • "commonjs": CommonJS 모듈 시스템을 사용합니다. 이는 Node.js 환경에서 주로 사용되는 모듈 시스템입니다. 컴파일된 JavaScript 코드에서 require와 module.exports 문법을 사용하여 모듈을 가져오고 내보냅니다.
  • "amd": Asynchronous Module Definition (AMD) 모듈 시스템을 사용합니다. 주로 브라우저 환경에서 사용되며, RequireJS와 함께 사용됩니다. 컴파일된 JavaScript 코드에서 define과 require 함수를 사용하여 모듈을 정의하고 가져옵니다.
  • "umd": Universal Module Definition (UMD) 패턴을 사용하여 모듈 시스템을 선택합니다. 이는 CommonJS와 AMD를 모두 지원하고 브라우저 및 Node.js에서 사용할 수 있습니다. 컴파일된 JavaScript 코드에서 조건부로 CommonJS나 AMD 스타일로 모듈을 가져오고 내보냅니다.
  • "system": SystemJS 모듈 로더를 사용하는 System 모듈 시스템을 선택합니다. 주로 브라우저 환경에서 사용됩니다. 컴파일된 JavaScript 코드에서 System.import 함수를 사용하여 모듈을 가져옵니다.
  • "es2015", "es2020", 등: ECMAScript의 모듈 시스템을 사용합니다. ES2015부터 JavaScript 자체에 모듈 시스템이 추가되었으며, "module" 옵션을 "es2015", "es2020" 등으로 설정하여 해당 버전의 모듈 시스템을 사용할 수 있습니다. 컴파일된 JavaScript 코드에서 import와 export 문법을 사용하여 모듈을 가져오고 내보냅니다.
• esModuleInterop
  • CommonJS 모듈을 가져올 때 추가적인 JavaScript 코드를 생성하여 CommonJS 모듈을 더 쉽게 가져올 수 있도록 합니다. 이 옵션은 "allowSyntheticDefaultImports"를 활성화시키는 역할도 합니다
• forceConsistentCasingInFileNames: 파일 이름의 대소문자를 일관되게 유지해야 함을 강제합니다. 예를 들어, 파일 MyClass.ts를 import MyClass from './myclass'로 가져올 때 대소문자가 일치하지 않으면 경고가 발생합니다
• strict: 모든 엄격한 타입 체크 옵션을 활성화합니다. 이 옵션은 다음의 엄격한 타입 체크 옵션들을 함께 활성화합니다
  • "noImplicitAny": 암시적인 any 타입을 허용하지 않음.
  • "strictNullChecks": null 및 undefined를 엄격하게 체크함."strictFunctionTypes": 함수 타입을 엄격하게 체크함.
  • "strictBindCallApply": bind, call, apply 메서드의 인자를 엄격하게 체크함.
  • "strictPropertyInitialization": 클래스 프로퍼티 초기화를 엄격하게 체크함.
  • "noImplicitThis": this의 타입을 암시적으로 any로 지정하지 않음.
  • "useUnknownInCatchVariables": catch 변수의 타입을 unknown으로 지정함.
  • "alwaysStrict": 항상 strict 모드로 코드를 생성함.
  • "noUnusedLocals": 사용되지 않는 로컬 변수를 허용하지 않음.
  • "noUnusedParameters": 사용되지 않는 함수 파라미터를 허용하지 않음.
  • "exactOptionalPropertyTypes": 선택적 프로퍼티의 타입을 엄격하게 체크함.
  • "noImplicitReturns": 함수에서 누락된 반환문을 허용하지 않음.
  • "noFallthroughCasesInSwitch": switch 문에서의 fallthrough를 허용하지 않음.
  • "noUncheckedIndexedAccess": 인덱스로 접근할 때 undefined를 허용하지 않음.
  • "noImplicitOverride": 오버라이딩 멤버에 override 키워드를 필수로 요구함.
  • "noPropertyAccessFromIndexSignature": 인덱스 시그니처로 선언된 키에 대한 속성 접근을 허용하지 않음.
  • "allowUnusedLabels": 사용되지 않는 레이블을 허용함.
  • "allowUnreachableCode": 도달할 수 없는 코드를 허용하지 않음.
• skipLibCheck: 모든 .d.ts 파일에 대한 타입 체크를 건너뜁니다. .d.ts 파일은 주로 타입 선언을 위해 사용되며, 이 옵션을 사용하면 컴파일 시간을 단축할 수 있습니다.

다른 옵션들

tsconfig.ts에 묶여 있는 순서대로 설명합니다.

Projects (프로젝트 설정 관련 옵션):

• incremental: 증분 컴파일을 위해 .tsbuildinfo 파일을 저장하는 것을 허용합니다. 컴파일 속도를 향상시킬 수 있습니다.
• composite: TypeScript 프로젝트 참조를 지원하기 위한 제약 조건을 활성화합니다. 프로젝트 간의 종속성 관리에 사용됩니다.
• tsBuildInfoFile: 증분 컴파일 파일인 .tsbuildinfo의 경로를 지정합니다.
• disableSourceOfProjectReferenceRedirect: 프로젝트 참조에서 선언 파일 대신 소스 파일을 선호하지 않도록 설정합니다.
• disableSolutionSearching: 편집 중에 멀티 프로젝트 참조 검사를 비활성화합니다.
• disableReferencedProjectLoad: TypeScript에 의해 자동으로 로드되는 프로젝트 수를 줄입니다.

Language and Environment (언어와 환경 관련 옵션):

• target: 생성된 JavaScript의 ECMAScript 버전을 선택합니다.
• lib: 대상 런타임 환경을 설명하는 번들 라이브러리 선언 파일을 지정합니다.
• jsx: 생성되는 JSX 코드의 종류를 지정합니다.
• experimentalDecorators: 실험적인 데코레이터 지원을 활성화합니다.
• emitDecoratorMetadata: 소스 파일의 데코레이션된 선언에 대한 디자인 타입 메타데이터를 출력합니다.
• jsxFactory: React JSX 출력을 대상으로 할 때 사용되는 JSX 팩토리 함수를 지정합니다.
• jsxFragmentFactory: React JSX 출력을 대상으로 할 때 프래그먼트에 사용되는 JSX 프래그먼트 참조를 지정합니다.
• jsxImportSource: 'jsx: react-jsx*'를 사용할 때 JSX 팩토리 함수를 가져오는 데 사용되는 모듈 지정자를 지정합니다.
• reactNamespace: 'createElement'에 대해 호출되는 객체를 지정합니다. 이 옵션은 'react' JSX 출력을 대상으로 할 때만 적용됩니다.
• noLib: 기본 lib.d.ts를 포함하여 모든 라이브러리 파일을 포함하지 않도록 설정합니다.
• useDefineForClassFields: ECMAScript 표준 호환 클래스 필드를 생성합니다.
• moduleDetection: 모듈 포맷 JS 파일을 감지하는 방법을 제어합니다.

Modules (모듈 관련 옵션):

• module: 생성되는 모듈 코드의 종류를 지정합니다. 이 예제에서는 CommonJS를 사용합니다.
• rootDir: 소스 파일이 위치한 루트 폴더를 지정합니다.
• moduleResolution: 모듈 지정자를 기준으로 TypeScript가 파일을 찾는 방법을 지정합니다.
• baseUrl: 상대적이지 않은 모듈 이름을 해결하기 위한 기준 디렉토리를 지정합니다.
• paths: 임포트를 다른 조회 위치로 다시 매핑하는 항목을 지정합니다.
• rootDirs: 모듈을 해결할 때 여러 폴더를 하나로 처리할 수 있도록 합니다.
• typeRoots: './node_modules/@types'와 같이 동작하는 여러 폴더를 지정합니다.
• types: 소스 파일에서 참조되지 않은 상태로 포함되는 타입 패키지 이름을 지정합니다.
• allowUmdGlobalAccess: 모듈에서 UMD 전역 변수에 액세스할 수 있도록 허용합니다.
• moduleSuffixes: 모듈 해결 시 검색할 파일 이름 접미사의 목록을 지정합니다.
• allowImportingTsExtensions: TypeScript 파일 확장자를 포함한 임포트를 허용합니다.
• resolvePackageJsonExports: 패키지 가져오기를 해결할 때 package.json의 'exports' 필드를 사용합니다.
• resolvePackageJsonImports: 가져오기를 해결할 때 package.json의 'imports' 필드를 사용합니다.
• customConditions: 가져오기를 해결할 때 resolver 특정 기본값에 추가할 조건을 설정합니다.
• resolveJsonModule: .json 파일을 가져올 수 있도록 허용합니다.
• allowArbitraryExtensions: 선언 파일이 존재하는 경우 모든 확장자의 파일을 가져올 수 있도록 허용합니다.
• noResolve: 'import', 'require', 또는 '<reference>'가 TypeScript가 프로젝트에 추가해야 하는 파일 수를 늘리지 못하도록 합니다.

JavaScript Support(자바스크립트 지원 관련 옵션):

• allowJs: JavaScript 파일을 프로그램의 일부로 허용합니다. 'checkJS' 옵션을 사용하여 이러한 파일에서 오류를 얻을 수 있습니다.
• checkJs: 타입 체크된 JavaScript 파일에서 오류 보고를 활성화합니다.
• maxNodeModuleJsDepth: 'node_modules'에서 JavaScript 파일을 확인하는 데 사용되는 최대 폴더 깊이를 지정합니다. 이 옵션은 'allowJs'와 함께 사용됩니다.