[TypeScript] 이미지 절대 경로 import 오류

TypeScript 에서 import naver from '@assets/images/naver.png';이렇게 했더니 찾을 수 없다는 에러가 났다.

이미 tsconfig.json에서 paths 로 절대경로 설정은 해둔 상황이다.

JSX 에서는 되었는데 TSX로 바꾸니 오류가 났다.

.png 확장자 허용이 되지 않아 타입스크립트에서 적용되지 않은 것이다.

 

해결방법

1. @types/global/index.d.ts 파일 생성

최상위 위치에서 @tpyes 폴더 생성 후 안에 global 폴더를 생성하고 그 안에 index.d.ts파일을 생성한다.

 

2. index.d.ts 파일 내용 작성

declare module '*.png';
declare module '*.gif';

필요한 확장자를 모두 추가한다.

 

3. tsconfig.json 파일 내용 작성

compilerOptions안에 typeRoots를 추가하여 아래와 같이 작성한다.

"compilerOptions": {
..
 "typeRoots": ["./node_modules/@types", "@types"]
}

 

 

TypeScript에서 모듈을 가져올 때 일반적으로 파일 경로를 사용합니다. 그러나 Webpack과 같은 모듈 번들러를 사용하면, 파일 경로 대신에 alias(별칭)을 사용하여 모듈을 가져올 수 있습니다. 그러나 TypeScript에서는 기본적으로 alias를 인식하지 않습니다. 따라서 tsconfig.json 파일에서 paths 또는 baseUrl 옵션을 사용하여 alias를 정의해야 합니다. 또한, TypeScript 컴파일러가 타입 선언 파일을 찾는 위치를 지정하는 typeRoots 옵션이 있습니다. 이 옵션은 기본적으로 "./node_modules/@types"를 포함하지만 추가적인 위치를 지정할 수도 있습니다. 따라서, "@assets/": ["assets/"]를 tsconfig.json 파일에 추가하여 alias를 정의하고, ".png" 파일의 타입 선언을 위해 "@types/global/index.d.ts" 파일에 declare module '.png';을 추가한 후, typeRoots 옵션에 "./node_modules/@types"와 "@types"를 모두 포함하여 추가한 것입니다. 이렇게 함으로써 TypeScript는 "@assets" 별칭을 인식하고, "*.png" 파일을 타입으로 인식할 수 있게 됩니다.

 

타입스크립트 이미지 경로 오류 해결 방법

 

[TIL 47] Typescript | file import

 

---

Q. 꼭 @types 로 폴더 지정해야하나?

A: No. 자유롭게 지정하면 된다.

 

@types폴더를 modules 폴더로 변경하고 싶어서 아래와 같이 진행했더니 잘 적용이 되었다.

 

디렉토리 구성

내용은 위와 동일하다.

 

tsconfig.json 변경

"typeRoots": ["./node_modules/@types", "./src/modules/global"]