☰

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

tag-icon • tag-icon visual-studio-code
Visual Studio 代码提示 svg 图像导入是 typescript 错误 2307

我有一个 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 代码了解导入的图像资产的方法？

答案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 应该知道如何找到模块而无需进一步的工作。但事实并非如此。

答案2

将定义文件的路径添加到文件include中的编译器选项中tsconfig.json：

{
    "compilerOptions": {
        include: ["path/to/definition/file"]
    }
}

包括

指定要包含在程序中的文件名或模式的数组。这些文件名是相对于包含 tsconfig.json文件的目录解析的。

include并exclude支持通配符来构成 glob 模式：

  • *匹配零个或多个字符（不包括目录分隔符）
  • ?匹配任意一个字符（不包括目录分隔符）
  • **/匹配嵌套到任意级别的任意目录

如果 glob 模式不包含文件扩展名，则仅包含具有受支持扩展名的文件（例如.ts，，.tsx以及.d.ts默认情况下，如果.js设置为 true）。.jsxallowJs

看https://www.typescriptlang.org/v2/en/tsconfig#include

答案3

虽然您自己回答了这个问题，但我想分享我的经验。看起来我的 vscode 决定选择declarations.d.ts（使用expo和，react-native-svg这很可能是您的情况）和 tsconfig.json "extends": "expo/tsconfig.base"）。也许这种行为会随着版本变化而改变。以下是对我有用的文件declarations.d.ts（在项目根目录中tsconfig.json）再次expo和react-native-svg：

declare module "*.svg" {
  import React from 'react';
  import { SvgProps } from "react-native-svg";
  const content: React.FC<SvgProps>;
  export default content;
}

相关内容