[React + Typescript] [오류 해결] Cannot find module '.png' or its corresponding type declarations.

React + Typescript 환경에서 개발하던 중,
React + Javascript, Next + Typescript에서 이미지를 import 했을 때와 같이 이미지를 불러오고자 했다.

하지만 아래와 같은 오류가 발생했다.

이 오류의 원인은 타입이 정의되어 있지 않아서 그런 것으로 보였다.

이를 위한 해결 방법은 두 가지가 있다

1. @types/라이브러리 설치

@types/라이브러리에서 따로 정의한 경우,

npm i --save-dev @types/library

위와 같이 설치를 해주면 된다.

2. @types/라이브러리가 없는 경우

하지만 해당 라이브러리가 없다면, .d.ts 파일을 추가해서 타입을 추가 해주어야 한다.

여기서 .ts 파일과 .d.ts 파일의 차이점은 무엇일까?

---

.ts 파일과 .d.ts 파일의 차이점

1. .ts 파일

.ts 파일은 Javascript로 컴파일되는 일반적인 Typescript 코드를 포함하는 파일이다.

2. .d.ts 파일

.d.ts 파일은 Typescript 타입 선언 파일로, 선언한 내용이 Typescript 컴파일 시의 문맥에 자동으로 추가되지만 Javascript로 컴파일 되지 않는 파일이다.
.d.ts 는 module 키워드를 사용하여 절대 경로로 import 할 수 있는 장점이 있다.

---

1) types/images.d.ts 파일 추가

2) 타입 추가

.png 이미지를 인식하도록 타입을 추가해주었다.

declare module '*.png';

더이상 빨간줄이 생기지 않고 이미지가 잘 출력되었다