无法找到模块svg与typescript上react应用程序,即使与自定义.d.ts

mnowg1ta  于 2023-11-20  发布在  TypeScript
关注(0)|答案(1)|浏览(101)

有很多几乎相似的问题,但我仍然找不到任何工作。
对于上下文:我使用CRA应用程序与js模板和迁移到ts后。SVG工作正常,所以它可能是一个类型的问题。
这是我的tsconfig.json

{
  "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react-jsx",
    "allowJs": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "paths": { "#*": ["./*"] }
  },
}

字符串
我的custom.d.ts(放置在src):

import React from "react";

declare module "*.svg" {
  export const ReactComponent: React.FunctionComponent<
    React.SVGAttributes<SVGElement>
  >;
  const src: string;
  export default src;
}


我的SVG用法:

import { ReactComponent as AddLineIcon } from "../../../assets/images/icons/add-line.svg";


我已经检查了路径,intellisense也确认了svg文件在那里。我已经尝试在“包含”和“文件”处将custom.d.ts添加到tsconfig.json。我已经尝试重新加载我的编辑器/TS服务器,但没有运气。感谢任何帮助或建议。

y3bcpkx1

y3bcpkx11#

对于需要类似功能的人,经过长时间的搜索,我发现import React from "react";行是问题所在,因为我使用的是React >17,并且它具有JSX转换。看起来很奇怪,但我最好的选择是在custom.d.ts上禁用/* eslint-disable no-undef */的eslint。可能需要向React提出一个问题(或Eslint/Typescript)但我不确定我应该要求哪一个,所以我不得不暂时接受这个丑陋的解决方案。
不过,如果有人有其他建议或更新,我会很乐意尝试。

相关问题