Typescript和React（使用Gatsby加载程序）：无法将图像导入为模块

Question

首先，我认为Gatsby不会遇到问题，因为运行gatby的tsc -p .之前运行yarn start会检测到相同的编译错误。

我有一个文件夹，其中包含一些我想编译的tsx文件

src/
  @types/
    index.d.ts
  components/
    bottom/bottom.tsx
    layout.tsx
  images/
    email.png
    costs.png 
gatsby-config.js
gatsby-node.js
tsconfig.json
package.json

我希望bottom.tsx加载email.png，但是出现此错误

As written in this post，我在src/@types/index.d.ts中将所有图片声明为模块。我已经在该文件中创建了一个接口以进行测试，并且编译器可以正确读取该文件。

declare module '*.jpg';
declare module '*.png';​

export interface Thing {
    name: string
}

使用import作为或在模块声明中添加内容不会改变任何内容。但是，如果我忽略打字稿编译器，则代码运行良好：

//@ts-ignore
import email from '../../images/email.png'
//@ts-ignore
import logo from '../../images/logo-bw.png'

它可以正常工作，因此使用Gatsby可以使代码的结构正常，但显然我失去了使用打字稿的很多好处，因为图像是网站的重要组成部分……此外，没有IDE自动完成功能可以帮助图像导入。

该盖茨比启动器被设为开放源代码，因此您可以在以下分支中检查配置：https://github.com/robusta-code/gatsby-the-robust/tree/0.0.1

请注意，加载CSS或sass模块可以：import '../styles/home.scss'

Answer 1

哇...问题是我的index.d.ts正在导出接口！

  

在TypeScript中，就像在ECMAScript 2015中一样，任何包含   顶级导入或导出被视为模块。相反，一个文件   没有任何顶级进口或出口申报的货物，将被视为   脚本，其内容在全局范围内可用（因此   以及模块）

删除export interface Thing{}就足够了。