在typescript(*.tsx)文件中,我不能用下面的语句导入svg文件:

import logo from './logo.svg';

Transpiler说:[ts]找不到模块'./logo.svg'。 我的svg文件就是<svg>…</svg>。

但在.js文件中,我能够导入它没有任何问题,完全相同的导入语句。我想这与svg文件的类型有关,它必须以某种方式为ts transpiler设置。

你能在ts文件中分享一下如何做到这一点吗?


当前回答

找不到模块或对应的类型声明|无法在typescript中导入svg文件

在。/custom.d中。Ts文件,添加这个:

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

如果你有任何困惑,请观看这个视频。 https://www.youtube.com/watch?v=Skhgdp7R9Tk

其他回答

    // eslint-disable-next-line spaced-comment
/// <reference types="react-scripts" />

如果你正在使用puglin slint,可能是他已经禁用了,认为这是一个评论,但不是为了阅读SVG,你需要这个类型脚本模块,只是禁用行和高兴

我在网上寻找解决这个问题的办法。这个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应用。

如果你正在使用Create-React-App启动器,请确保react-app-env.d。Ts包含如下行:

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

我在尝试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"
  },

希望它能帮助到别人。

对我来说,当我在src/types/images.d.ts中放入以下一行时,它就工作了

声明模块'*.svg';

我用下面的方法导入图像

import {ReactComponent as WifiIcon} from '../../ assets/images/Wifi.svg';

在tsconfig.json

我有以下complierOptions

"compilerOptions": {
    "typeRoots": ["node_modules/@types", "src/types"]
}

希望它能帮助到别人。我使用的是最新版本的CRA。