[React+TypeScript] 이미지 경로를 찾지 못할 때 오류 해결 방법

React+TypeScript 환경에서 개발 중 반복되는 svg 이미지가 있어 컴포넌트화하여 사용하고 싶다.

컴포넌트화하여 사용하고자 하는데 올바른 이미지 경로로 작성했지만 아래와 같이 오류가 발생한다.

원인

확장자를 타입스크립트가 받아드리지 못했음

해결방법

• 프로젝트 최상위 경로에 @types/global/index.d.ts 파일 생성
• 파일 내용

declare module '*.svg';

• tsconfig.json 의 compilerOptions 안에 내용 추가

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