importsNotUsedAsValues, preserveValueImports, isolatedModules, verbatimModuleSyntax의 등장 순서와 의미

TypeScript는 다양한 컴파일러 옵션을 통해 개발자가 코드의 빌드 및 트랜스파일 방식을 세밀하게 제어할 수 있도록 해줍니다. 그중에서도 importsNotUsedAsValues, preserveValueImports, isolatedModules, **verbatimModuleSyntax**와 같은 옵션들은 JavaScript로 변환될 때의 타입 처리 및 모듈 변환 방식에 큰 영향을 미칩니다. 이 옵션들이 어떻게 등장했는지, 각각의 필요성과 설정 방법, 그리고 옵션들 간의 관계에 대해 알아보겠습니다.

1. isolatedModules (TypeScript 3.7)

📅 도입 시기: TypeScript 3.7

TypeScript 3.7에서 처음 도입된 isolatedModules 옵션은 TypeScript 컴파일러가 모든 모듈을 독립적으로 처리하도록 강제하는 역할을 합니다. 이는 특히 Babel, esbuild, SWC와 같은 트랜스파일러와 함께 사용할 때 중요한 역할을 하며, 개별 파일을 트랜스파일할 수 있도록 설정해 줍니다.

🎯 필요성

isolatedModules가 활성화되면 TypeScript는 각각의 파일을 독립적으로 컴파일하도록 강제합니다. 트랜스파일러가 파일 간 종속성을 처리할 수 없을 경우, 이 옵션을 사용해야 합니다. isolatedModules를 설정하면 **const enum**과 같은 일부 TypeScript 특성이 지원되지 않지만, Babel과 같은 트랜스파일러와의 호환성을 보장할 수 있습니다.

⚙️ 설정값

{
  "isolatedModules": true | false
}

• true: 모든 파일을 개별적으로 트랜스파일합니다.
• false: 파일 간 종속성도 고려하여 트랜스파일합니다 (기본값).

2. importsNotUsedAsValues (TypeScript 3.8)

📅 도입 시기: TypeScript 3.8

importsNotUsedAsValues 옵션은 타입 전용 import가 JavaScript로 변환될 때 어떻게 처리될지를 결정하는 옵션입니다. TypeScript에서 import type을 사용하면 타입만 가져오고 실제 코드에는 영향을 미치지 않기 때문에 이를 처리하는 방법을 설정할 수 있게 되었습니다.

🎯 필요성

이 옵션은 TypeScript 코드에서 타입만 가져오는 import가 최종 JavaScript 코드에 영향을 미칠지 여부를 결정할 수 있게 해줍니다. 예를 들어, import type으로 가져온 타입이 사용되지 않으면 이를 제거할지, 유지할지 선택할 수 있습니다.

⚙️ 설정값