使用 TypeScript 导入 SVG 文件时出现类型错误

作者：System 时间：2024年08月11日分类：所有,typescript 字数：772

报错解释：

在使用TypeScript导入SVG文件时，可能会遇到类型错误，因为SVG不是TypeScript理解的标准模块类型。这通常是因为TypeScript将SVG文件视为.svg扩展名的字符串，而不是一个模块。

解决方法：

使用类型断言来避免类型错误，例如：




import * as React from 'react';
 
const MyComponent: React.FC = () => {
  const MySvg = require('./my-svg.svg') as React.FC;
  return <MySvg />;
}

使用import()语法，允许动态导入，并且可以指定特定的类型：




import('./my-svg.svg').then(svg => {
  // svg 类型通常是 { ReactComponent: () => JSX.Element }
  const MySvg = svg.ReactComponent;
  // 使用 MySvg 组件
});

确保你的TypeScript配置和项目设置能够正确处理SVG文件，并且类型定义与你的使用场景相匹配。