即使使用custom.d.ts，也无法在create-react-app上找到带有typescript的模块svg

Question

有很多几乎类似的问题，但我仍然找不到任何有用的东西。

对于上下文：我正在使用带有 js 模板的 CRA 应用程序，然后迁移到 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";

我检查了路径，智能感知也确认了 svg 文件在那里。我尝试在“包含”和“文件”处将

custom.d.ts

添加到

tsconfig.json

。我尝试重新加载我的编辑器/TS 服务器，但没有成功。感谢任何帮助或建议。

Answer 1

对于任何需要类似东西的人来说，经过长时间的搜索，我发现

import React from "react";

行是问题所在，因为我使用的是 React >17 并且它具有 JSX 转换。看起来很奇怪，但我最好的选择是使用

/* eslint-disable no-undef */

上的

custom.d.ts

禁用 eslint。可能需要向 React（或 Eslint/Typescript）提出问题，但我不确定应该问哪一个以及我应该要求什么，所以我暂时不得不接受这个丑陋的解决方案。

如果有人有其他建议或更新，我会非常乐意尝试。