[ TypeScript ] import로 이미지 불러올 때

현재 기존 리액트프로젝트를 자바스크립트에서 타입스크립트로 바꾸는 작업을 진행하던 도중에, 이미지 파일을 불러올 수 없다는 오류가 발생하였다. 이미지도 따로 타입을 선언해주란 말인가..? 란 생각이 첫 번째로 들었다.

 

 

---

 

 

아래 이미지 속의 에러메시지를 해석해보자.

 

 

뭐 대충 모듈이나 선언된 형식을 찾을 수 없다는 얘기인 것 같다. 그래서 구글링을 해보았는 데, 명확한 해법이 나와있었다.

 

 

 

---

 

 

 

해법이 담긴 링크는 여기다.

https://www.carlrippon.com/using-images-react-typescript-with-webpack5/

Using images in React and TypeScript with Webpack 5

 

 

---

결론은 src폴더 아래에 image.d.ts 파일을 만들어 주었다.

 

 

Q. d.ts 파일은 무엇일까?

JS로 만들어진 서드파티 모듈들을 TypeScript 환경에서 사용할 수 있도록 타입을 선언해주는 파일이라고 생각하면 된다.  그래서 우리가 @types/react-router-dom 과 같이, TS환경일때 따로 설치해주는 파일이 타입스크립트 환경을 위해 타입만 선언해주는 파일이다. 

 

자세한 내용은 아래 참조블로그

https://ssocoit.tistory.com/253

[TypeScript] .d.ts파일이 뭘까?

 

그리고 파일 내에 아래와 같이 확장자들을 선언해주었다. 

declare module "*.jpg";
declare module "*.png";
declare module "*.jpeg";
declare module "*.gif";