reactjs - Typescript 和 React(使用 Gatsby 加载器): unable to import images as modules

Question

首先，我不认为 Gatsby 与运行问题有关 tsc -p .将检测到相同的编译错误，在 gatby 的 yarn start 之前跑了。

我有一个文件夹，里面有一些我想编译的 react 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 中将所有图片声明为模块.我在这个文件中创建了一个接口(interface)用于测试目的，并且该文件被编译器正确读取。

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

export interface Thing {
    name: string
}

使用 import as 或向模块声明添加内容不会改变任何东西。但是，如果我忽略 typescript 编译器，代码运行良好:

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

它有效，所以 Gatsby 的代码结构没问题，但显然我失去了使用 typescript 的很多好处，因为图像是网站的重要组成部分......另外，没有 IDE 自动完成来帮助图像导入。

这个 Gatsby starter 是开源的，所以你可以在这个分支检查配置: https://github.com/robusta-code/gatsby-the-robust/tree/0.0.1

请注意，加载 css 或 sass 模块是可以的: import '../styles/home.scss'

Answer 1

哇...问题是我的index.d.ts正在导出一个接口(interface)!

In TypeScript, just as in ECMAScript 2015, any file containing a top-level import or export is considered a module. Conversely, a file without any top-level import or export declarations is treated as a script whose contents are available in the global scope (and therefore to modules as well)

删除 export interface Thing{}就够了。