TypeScript 引入图片等资源文件报错的解决方法

TypeScript 引入资源文件报错原因

在 TSX 文件中直接引用图片时，代码编辑器往往会报错，提示无法找到该引用。

TypeScript 默认无法识别非代码类型的文件（JavaScript 中通常可以正常引用）。若要在 TypeScript 中正确使用此类资源，需先声明其类型。

创建类型声明文件

新建一个 TypeScript 声明文件，例如 global.d.ts（.d.ts 代表 TypeScript declaration file，即类型声明文件），并将其放置在项目的主要代码文件夹中。

在该声明文件中，添加对各种文件类型的模块声明，具体示例如下：

declare module '*.svg' {
 interface Svg {
  content: string;
  id: string;
  viewBox: string;
  node: any;
 }
 const svg: Svg;
 export default svg;
}

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

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

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

简化声明方式

如果只需要处理图片，也可以简化为 declare module '*.png'; 的形式。

编译识别机制

项目编译时，TypeScript 会自动读取这些声明文件的内容，从而实现对资源文件的类型识别。

至此，关于解决 TypeScript 引用资源文件后提示找不到的异常处理方法已介绍完毕。如需了解更多相关 TypeScript 内容，请搜索本站历史文章或继续浏览后续文章，感谢支持。