📌  相关文章
📜  找不到模块 .svg' 或其对应的类型声明. - 打字稿(1)

📅  最后修改于: 2023-12-03 15:10:04.500000             🧑  作者: Mango

找不到模块 .svg 或其对应的类型声明. - 打字稿

当在使用 TypeScript 开发 React 应用或组件时,有时候会遇到类似于以下错误提示:

Error: Cannot find module './yourIcon.svg' or its corresponding type declarations.

这个错误提示的意思是 TypeScript 找不到你在代码中引入的 .svg 文件。这个问题通常出现在两种情况下:

  1. 你并没有在项目中安装处理 SVG 文件的 loader,比如 svg-loader

解决办法:使用 npmyarn 安装相应的 loader,并在 webpack 或是其他打包工具的配置文件中添加该 loader。

  1. 你并没有在 TypeScript 的配置文件中为 .svg 文件添加相应的类型声明。

解决办法:在项目的 src 目录下新建一个 typings.d.ts 文件,并添加以下内容:

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

这个文件的作用是告诉 TypeScript,当你在代码中引入一个 .svg 文件时,它的类型应该是 any,并且这个模块默认导出的内容是这个 any 类型的。

总结:处理此问题的主要方法有两种,分别是安装 SVG loader 和添加相应的类型声明。按照以上方法操作之后,问题应该就能够解决了。