[React-TypeScript] TSX에서 svg, png import

기존의 jsx에 import 되어있던 이미지들이 tsx로 바꾸니 from 뒤로 오류가 생겼났다.

문제 원인

its corresponding type declarations.

TypeScript에게 해당 모듈이 어떤 타입을 가지는지 알려줘야한단다. 그래서 declare module 구문을 사용하여 따로 타입을 가지는지 알려주기위한 파일을 만들어야했다.

해결 방법?

svg와 png 파일을 모듈로 선언해야한다. 별도의 타입 선언 파일을 생성하고, tsconfig.json에서 include 부분에 해당 파일 경로를 추가해준다. 이렇게 하면 TypeScript는 .svg, .png 파일을 React 컴포넌트로 인식할 수 있게 된단다. 일반적으로 @types 폴더나 src 폴더 내에 타입 선언 파일을 작성한다.

• src/custom.d.ts 파일 생성

declare module '*.svg' {
  const content: string;
  export default content;
}

declare module '*.png' {
  const content: string;
  export default content;
}

• tsconfig.json 변경

"include": [
    //컴파일할 폴더 입력. src의 모든파일 확인함
    "src",
    "src/@types/custom.d.ts"
  ],

폴더 구조 예시

- src/
  - components/
  - utils/
  - ...
  - @types/
    - custom.d.ts
- tsconfig.json
- package.json