Typescript 환경에서 image를 import 하지 못할 때

Typescript가 해당 이미지의 확장자를 타입으로 인식하지 못하기 때문에 발생한 문제.

따로 타입을 선언해주면 됨.

아래는 타입을 선언하는 방법.

 

1. src > type > image.d.ts 파일 생성

( 경로나 파일명은 src/types.d.ts 또는 src/@types/custom.d.ts 등이어도 무관함)

 

declare module "*.png" {
    const value: string;
    export default value;
  }

  declare module "*.svg" {
    const value: string;
    export default value;
  }

 

2. tsconfig.json에 타입 선언 경로가 포함되도록 설정

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