Visual Studio 代码说 svg 图像导入是 typescript 错误 2307

Question

我有一个 React/Typescript 组件，我在其中导入了一个 svg（这是用 Webpack 的 HtmlWebpackInlineSVGPlugin 构建的）。

import RN_Logo from '../../../public/images/RN_logo.svg';

我稍后在渲染函数中使用它

<img src={RN_Logo} className="RN__Logo"/>

它工作正常，在我构建和一切时呈现。但是 VS Code 中的文件是红色的，导入它的那一行是红色的，当我悬停该行时，它说

Cannot find module '../../../public/images/RN_logo.svg'. ts(2307)

这很烦人，因为它可以工作，我不禁认为该行的错误消息和标记是错误的，应该关闭 - 有没有办法做到这一点，最好是一种允许 VS 代码了解导入的图像资产的方法?

Answer 1

好的，所以我对 custom.d.ts 文件以某种方式涉及的怀疑是正确的。custom.d.ts 文件允许 typescript 了解如何编译包含在 tsConfig.json 中的这些资源，但 Visual Studio Code 由于某种原因不知道 custom.d.ts 文件 - 为了让 VS Code 知道在我需要导入 svg 文件的文件中，我需要包含一个参考路径 - 像这样：

/// <reference path="../../../../custom.d.ts" />

其中路径指向 custom.d.ts 文件的位置。

然而，虽然这已经解决了我的情况，但我在过去几天里读了一堆关于类似问题的错误报告，不确定它是否会解决其他人对类似问题的体验，相关资源

https://github.com/microsoft/TypeScript/issues/2709 https://github.com/Microsoft/TypeScript/issues/10346

顺便说一句，我不得不承认，我觉得如果 typescript 知道如何编译模块，VS Code 应该知道如何找到模块，而无需进一步工作。但事实并非如此。