小编Анд*_*ник的帖子

在带有 ESlint 的 TypeScript React 项目中使用 SVG 的正确方法

在我的项目中,我使用了 TypeScript、React 和 ESlint 等技术。
问题是 eslint 对于 svg 文件总是会出现错误
“任何值的不安全分配。(eslint@typescript-eslint/no-unsafe-assignment)”。
在此输入图像描述

在我的 src 文件夹的根目录中,我有 custom.d.ts ,其中声明了 svg 模块:

// 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;
}
Run Code Online (Sandbox Code Playgroud)

尝试了两种声明,其中一种声明是从 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>
Run Code Online (Sandbox Code Playgroud)

为了消除错误,我可以使用类型转换,例如:

<img src={Logo as string} alt="Logo" className={styles.icon} /> …
Run Code Online (Sandbox Code Playgroud)

svg typescript reactjs eslint webpack

5
推荐指数
1
解决办法
4830
查看次数

标签 统计

eslint ×1

reactjs ×1

svg ×1

typescript ×1

webpack ×1