React JS转TypeScript后出现SVG与img src类型不兼容错误求助

问题原因 #

手动将JS React项目转为TS时，TS默认未配置SVG文件的导入类型，会把SVG识别成React函数组件类型，但<img>的src属性需要的是字符串路径，因此出现类型不匹配的报错。而create-react-app的TS模板已经内置了SVG的类型声明，所以不会触发该问题。

解决步骤 #

• 添加SVG类型声明文件
  在项目src目录下新建types/svg.d.ts文件，写入以下内容：

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

  同时确保tsconfig.json的include字段包含src/**/*，让TS能扫描到这个类型文件：

  {
    "include": ["src/**/*"]
  }
  

• 检查tsconfig关键配置
  确认tsconfig.json的compilerOptions里以下配置正确：

  {
    "compilerOptions": {
      "moduleResolution": "node",
      "esModuleInterop": true
    }
  }
  

• 清理缓存并重启
  重启代码编辑器（比如VS Code），或者通过编辑器命令面板重启TS服务；也可以清理依赖缓存后重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

内容的提问来源于stack exchange，提问作者Sandeep Thomas