Gatsby+TypeScript项目导入图片触发TS2307无类型声明报错

• TypeScript 静态检查的原生逻辑仅识别有明确类型定义的代码模块（.ts/.tsx/.js等），对图片、样式文件这类非代码格式的静态资源没有内置的类型声明能力，因此碰到这类导入语句时会触发模块找不到的类型报错。
• 自定义React组件可以正常导入，是因为组件本身是符合TS模块规范的代码文件，存在明确的导出类型，不会被类型校验拦截。
• JS文件中导入图片不报错，是因为纯JS文件无严格的类型校验环节，只要Webpack能在运行时解析到资源路径即可正常执行，不会触发类型层面的拦截。
• Gatsby 底层通过Webpack实现的静态资源导入能力，仅作用于运行时打包阶段，不会自动为TypeScript补充对应资源的类型声明，因此即便资源路径真实存在、运行时能正常加载，TS静态检查依然会抛出ts(2307)错误。

• 在src目录下新建全局类型声明文件static-resources.d.ts，该路径处于当前tsconfig.json的./src/**/*扫描范围内，可被TypeScript自动加载。
• 在声明文件中为所有项目用到的静态资源后缀补充模块类型定义，示例代码如下：

// 图片类资源声明
declare module '*.jpg' {
  const resourcePath: string;
  export default resourcePath;
}

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

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

// 按需补充其他项目用到的资源后缀，如.webp/.gif/.css等

• 修正导入语句的语法错误，原代码缺少闭合的单引号，正确写法为：

import image from '../assets/images/picture.jpg'

• 注意：无需调整现有gatsby-plugin-typescript的配置参数，该报错属于类型定义缺失问题，和插件的TS编译逻辑无关联。
• 保存所有配置后重启Gatsby开发服务，等待TypeScript重新加载类型声明，报错即可消除。这套配置不会影响Gatsby本身的图片打包、资源优化能力，与自定义组件的导入逻辑完全兼容。

内容的提问来源于stack exchange，提问作者Abdalla Al-Hossainy