对我来说，我必须包含react-app-env.d。tsconfig*.json:

  "include": [
    "src/Router.tsx",        // my main entry point
    "src/global.d.ts",       // global stuff
    "src/react-app-env.d.ts" // react global stuff
  ]

我在网上寻找解决这个问题的办法。这个stackoverflow问题是最重要的，但没有一个答案对我有用。

最后，我通过尝试一些不同的技术找到了解决方案。

创建一个。/global .d。Ts文件在你的项目的根目录，在你的。/tsconfig文件的同一位置/级别。json。 在。/globals.d中。Ts文件，添加这个:

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

这正确地将.svg导入为字符串，这是我在排名最高的答案中注意到的一个问题。

更新您的tsconfig。Json格式:

{
  "files": ["globals.d.ts"]
}

就是这样，这对我来说很管用。这是一个VanillaJS应用。

如果你使用webpack，安装svg-inline-loader，在webpack.config.js中添加该模块:

{
    test: /\.svg$/,
    loader: 'svg-inline-loader',
}

它在建造后工作良好。

如果你的IDE报告一个交互错误，它可以通过添加//@ts-ignore来解决:

//@ts-ignore
import logo from './logo.svg';

Svg-inline-loader webpack文档

我在尝试REACT + typescript教程时也遇到了同样的问题。 对我有用的是下面的重要陈述。

import * as logo from 'logo.svg'

下面是我在package.json中的依赖项。

  "dependencies": {
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-scripts-ts": "3.1.0"
  },

希望它能帮助到别人。

我找到的解决方案:在ReactJS项目中，在文件react-app-env.d中。你可以删除评论中的空格，比如:

之前

// / <reference types="react-scripts" />

后

/// <reference types="react-scripts" />

我希望能帮到你

我们已经实现了另一种方法:制作svg组件。我这样做是因为它困扰我，我使用commonJS的要求语句与我的导入。