Question

在typescript(*.tsx)个文件中，我无法使用以下语句导入svg文件：

import logo from './logo.svg';

Transpiler说：[ts] cannot find module './logo.svg'. 我的svg文件只是<svg>...</svg>。

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

请问你能分享如何在ts文件中使用它吗？

Answer 1

如果您使用webpack，则可以通过创建自定义类型文件来执行此操作。

使用以下内容创建名为 custom.d.ts 的文件：

declare module "*.svg" {
  const content: any;
  export default content;
}

来源：https://webpack.js.org/guides/typescript/#importing-other-assets

Answer 2

感谢smarx指出使用require()。所以在我的情况下它应该是：

const logo = require("./logo.svg") as string;

在* .tsx文件

中工作正常

Answer 3

使用正确的类型（由于RedMatt）添加一个custom.d.ts文件（我在src目录的根路径上创建了该文件）：

declare module '*.svg' {
  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
  export default content;
}

安装svg-react-loader或某些other，然后：

将其用作主要的svg加载器
或者，如果您要迁移代码库并且不想接触工作部分（JS），请在导入时指定加载程序：

import MySVG from '-!svg-react-loader!src/assets/images/name.svg'

然后将其用作JSX标签：

function f() { 
  return (<MySVG />); 
}

Answer 4

我找到的解决方案：在ReactJS项目中，在文件react-app-env.d.ts中，您只需删除注释中的空格，例如：

之前

ADD CONSTRAINT only_one_name_not_null CHECK (num_nonnulls(n1, n2, n3, n4) = 1)

之后

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

希望对您有帮助

Answer 5

要使用n 带TypeScript的代码资产 ，我们需要推迟这些导入的类型。这需要一个 custom.d.ts 文件，该文件表示我们项目中TypeScript的自定义定义。

让我们为.svg文件设置声明：

custom.d.ts

declare module "*.svg" {
  const content: any;
  export default content;
}

在这里，我们通过指定任何以.svg结尾的导入并将该模块的内容定义为SVG来声明一个新的SVG模块。

Answer 6

我们已经实现了另一种实现方法：制作SVG组件。我这样做是因为它使我感到困惑，因为我在require旁边使用了commonJS import语句。

Answer 7

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

希望它可以帮助某人。

Answer 8

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

如果您使用的是puglin斜纹纸，则可能是因为他已禁用，以为这是一条评论，但不阅读svg，则需要这种类型的脚本模块，只需禁用该行即可，并保持快乐

Answer 9

您可以像 create-react-app 一样为 svgs 声明模块：

react-app.d.ts

declare module '*.svg' {
  import * as React from 'react';

  export const ReactComponent: React.FunctionComponent<React.SVGProps<
    SVGSVGElement
  > & { title?: string }>;

  const src: string;
  export default src;
}

见source

无法在typescript中导入svg文件

9 个答案: