intro 타입스크립트 프로젝트를 진행하면서 "타입 설정은 정말 끝이 없구나..."라는 걸 많이 실감했다. 그래서 기록만이 살 길이다!라는 것 또한 깨달으며 이미지 타입 설정에 대해서 글을 남겨본다.
img 태그에 import 해 온 이미지를 연결시켜 주면 위와 같은 에러를 만날 수 있다. 걱정하지 마시라~! 바로 해결해 보자.
declare module '*.jpg';
declare module '*.png';기존의 index.d.ts 파일이다. 이름은 그다지 중요하지 않다. src 경로 내에 d.ts 파일을 만들어주는 것이 핵심이다.
이렇게 작성한 이유는 타입스크립트의 모듈 해석(module resolution)을 통해 컴파일될 때, import가 무엇을 참조하는지 알아낸다. 즉, .ts, .tsx, .d.ts 파일만 인식하기 때문에 모듈을 찾을 수 없다는 에러가 발생한다. 때문에 이를 해결하기 위해 타입스크립트가 이미지 파일을 인식할 수 있도록 작성한 코드이다. 타입을 명시해주지 않아도 해결이 되길래 마무리하였다.
그러나 새로운 이미지를 추가하고 나니, 타입 에러가 발생하였다.
declare module '*.jpg' {
const value: string;
export default value;
}
declare module '*.png' {
const value: string;
export default value;
}위와 같이 타입을 선언해 주면 에러 해결이다!
📜 출처