React+TS导入PNG/SVG时报TS2307无法找到模块问题求助

加了类型声明仍报错的核心原因是tsconfig的文件匹配范围配置错误，按以下步骤操作即可修复：

• 第一步：修正tsconfig.json的文件扫描配置
  你当前配置里的include和files字段用了frontend/src/*的单层通配符，这个规则只会匹配src根目录下的第一层文件，不会递归扫描子目录，也会导致全局类型声明无法被正确加载。同时files字段适合指定单个待编译文件，和include混用时很容易出现范围覆盖问题，直接删除即可。
  修改后的tsconfig核心配置如下：

{
    "compilerOptions": {
        "target": "ES5",
        "module": "ESNext",
        "moduleResolution": "node",
        "jsx": "react-jsx",
        "noEmit": true,
        "isolatedModules": true,
        "esModuleInterop": true,
        "strict": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "baseUrl": "frontend/src"
    },
    "include": [
        "frontend/src/**/*"
    ]
}

配置里的**/*是递归通配符，会扫描src目录下所有层级的.ts、.tsx、.d.ts文件，放在src根目录的global.d.ts会被自动识别，不需要单独在配置里指定路径。

• 第二步：补全图片模块的类型声明
  你当前写的模块声明只标记了模块存在，没有定义导出值的类型，建议把global.d.ts的内容替换为如下形式，适配webpack打包时图片导入默认返回资源路径字符串的逻辑：

declare module '*.png' {
  const content: string;
  export default content;
}
declare module '*.svg' {
  const content: string;
  export default content;
}
declare module '*.jpg' {
  const content: string;
  export default content;
}
declare module '*.jpeg' {
  const content: string;
  export default content;
}
declare module '*.gif' {
  const content: string;
  export default content;
}

• 第三步：重启TS服务让配置生效
  TS不会自动热更新配置变更，改完文件后需要手动重启服务：
  • VS Code等编辑器用户：按快捷键调出命令面板（Windows/Linux为Ctrl+Shift+P，Mac为Cmd+Shift+P），执行TypeScript: Restart TS Server
  • 本地开发服务：停掉当前dev进程，重新启动，避免旧的编译缓存干扰
• 异常排查点
  如果做完以上操作仍报错，逐一检查以下问题：
  • 确认global.d.ts后缀名正确，不要误写为.ts格式
  • 确认导入图片的路径、文件名大小写和本地实际文件完全一致，你开启了forceConsistentCasingInFileNames规则，大小写不匹配也会抛出模块找不到的错误
  • 如果你配置了svg相关loader将svg作为React组件导入，需要额外补充组件类型声明，当前你将svg作为图片路径传入组件的场景，上述声明已足够使用

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