TypeScript import 오류들

01/13

 

 

.TS 모듈 불러오기 활성화 오류

An import path can only end with a '.ts' extension when 'allowImportingTsExtensions' is enabled. 에러 발생

파일을 불러올 때 .ts 확장자를 사용했는데, TypeScript 에서는 기본적으로 이 기능이 비활성화 되어 있다. 에러 메세지에서 안내한 것 처럼, allowImportingTsExtension 를 켜주면 해결되는 문제.
tsconfig.json 파일을 수정하면 된다.

{
  "compilerOptions": {
    "allowImportingTsExtensions": true,
    // 기타 다른 옵션들
  }
}

 

allowImportingTsExtensions 옵션 활성화 오류

Option 'allowImportingTsExtensions' can only be used when either 'noEmit' or 'emitDeclarationOnly' is set. 에러 발생

위의 단계를 걸쳐 allowImportingTsExtension 옵션은 활성화 하려고 해도, 미리 이 설정을 수정해 주지 않았다면 또 에러가 발생한다ㅋㅋㅋ
마찬가지로 에러 메세지 안내대로 noEmit 과 emitDeclarationOnly 둘 중 하나를 켜주면 해결된다. tsconfig.json 파일을 다시 수정하자.

{
  "compilerOptions": {
    "allowImportingTsExtensions": true,
    "noEmit": true
  }
}
// 또는
{
  "compilerOptions": {
    "allowImportingTsExtensions": true,
    "emitDeclarationOnly": true
  }
}

참고로 두 옵션 중 하나만 사용할 수 있는데, 무슨 차이인가 하면..

noEmit (출력 안함)
TypeScript 가 컴파일 과정에서 어떠한 출력 파일도 생성하지 못하게 한다.
TypeScript 를 타입 검사 용도로만 사용하고, 실제 JavaScript 변환 및 파일 생성은 다른 도구에 맡길 때 사용.
tsc 명령어는 타입 검사는 수행하지만, 결과 파일을 출력 디렉터리에 기록하지 않는다.

emitDeclarationOnly (선언 파일만 출력)
JavaScript 파일은 생성하지 않고, 오직 선언 파일(.d.ts) 만 생성한다.
타입 정의는 제공해야 하지만, 실제 JavaScript 출력은 별도의 대체 트랜스파일러에 의해 생성될 때 유용.
지정된 declarationDir 또는 outDir 에 .d.ts 파일만 출력한다.

---

JSON import 오류

Cannot find module '~~~.json'. Consider using '--resolveJsonModule' to import module with '.json' extension.ts" 오류 발생

모듈때의 오류와 마찬가지로, TypeScript 에서 JSON 파일을 import 하려면 켜줘야 하는 옵션이다. tsconfig.json 수정 필요.

{
  "compilerOptions": {
     "resolveJsonModule": true,
     "esModuleInterop": true,
     // "moduleResolution": "node(선택)",

     // 기타 다른 옵션들
  }
}

에러 메세지에 있던 resolveJsonModule 외에 다른 옵션들을 설명해보면,

esModuleInterop
CommonJS 모듈들을 ES6 모듈처럼 사용할 수 있다. 이전 버전과 호환성 문제로, import * as express from 'express' 같은 형식을, import express, {Router} from 'express' 처럼 사용할 수 있는 식.

moduleResolution (모듈 결정)
import 에서 어느 파일을 참조하는지 파악하여 올바른 타입 검사를 수행하기 위한 옵션.

classic : RequireJS 와 같은 구식 모듈 로더와의 하위 호환성을 위한 오래된 방법. 신규 프로젝트들에는 권장하지 않음.
node (node10) : 이전 버전의 Node.js 에서 사용되는 CommonJS 모듈 결정 규칙을 따른다. node_modules 를 찾고 >> 절대 및 상대 경로를 확인 >> package.json 의 main 필드 찾는 것을 지원.
node16 / nodenext : Node.js 버전 12 이상인 프로젝트에 권장. CommonJS 와 ESM(ECMAScript Modules) 을 모두 지원한다. package.json 필드인 exports 및 imports 를 존중.
bundler : TypeScript 5.0 에서 도입된 옵션으로, Webpack, Vite, esbuild 와 같은 최신 번들러를 사용하는 프로젝트들에 적합하다. 최종 결정을 번들러에 맡겨 가져오기 경로에 더 관대한 방식. 번들러는 혼합된 모듈 유형을 효과적으로 처리 가능하다.