使用 ESlint 在 TypeScript React 项目中使用 SVG 的正确方法答案

【问题标题】：Correct way of working with SVG in a TypeScript React project with ESlint使用 ESlint 在 TypeScript React 项目中使用 SVG 的正确方法
【发布时间】：2021-03-10 09:07:35
【问题描述】：

在我的项目中，我使用了 TypeScript、React 和 ESlint 等技术。
问题是 eslint 总是为 svg 文件报错
“任何值的不安全分配。（eslint@typescript-eslint/no-unsafe-assignment）”。

在我的 src 文件夹的根目录中，我声明了带有 svg 模块的 custom.d.ts：

// declare module "*.svg";

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

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

  const src: string;
  export default src;
}

尝试了两种声明都注释了一个和一个来自 create-react-app。
我在项目中使用 SVG 的方式：

import Logo from "images/logo.svg";

<Link to={PATH.ROOT} className={styles.logo}>
    <img src={Logo} alt="Logo" className={styles.icon} />
     <span className={styles.title}>Ascension Wiki</span>
</Link>

为了摆脱错误，我可以使用类型转换：

<img src={Logo as string} alt="Logo" className={styles.icon} />

或者关闭 ESlint 中的规则，但是我认为应该有更好的方法来处理这个问题。

【问题讨论】：

标签： reactjs typescript svg webpack eslint

【解决方案1】：

使用此声明为我消除了 eslint 错误：

declare module "*.svg" {
  const src: string;
  export default src;
}

【讨论】：