Код Visual Studio говорит, что импорт изображений SVG является ошибка машинописи 2307

У меня есть компонент React/Typescript, в который я импортирую svg (он построен с помощью HtmlWebpackInlineSVGPlugin Webpack).

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 понимать об импортированных активах изображений?

Источник

3 ответа

Итак, моё подозрение, что файл custom.d.ts был каким-то образом верным, было правильным. Файл custom.d.ts позволяет машинописному тексту понять, как скомпилировать эти ресурсы, когда он включен в tsConfig.json, но код Visual Studio по какой-то причине не знает о файле 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

Кроме того, я должен признать, что я чувствую, что если typScript знает, как скомпилировать модуль, VS Code должен знать, как найти модуль без дальнейшей работы. Но это не так.

Источник

Добавьте путь к файлу определения в параметр компилятора вашего файла:

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

включать

Указывает массив имен файлов или шаблонов для включения в программу. Эти имена файлов разрешаются относительно каталога, содержащегоtsconfig.jsonфайл.

includeиexcludeподдержка подстановочных знаков для создания шаблонов glob:

  • *соответствует нулю или более символам (исключая разделители каталогов)
  • ?соответствует любому одному символу (исключая разделители каталогов)
  • **/соответствует любому каталогу, вложенному в любой уровень

Если шаблон glob не включает расширение файла, то включаются только файлы с поддерживаемыми расширениями (например,.ts,.tsx, и.d.tsпо умолчанию, с.jsи.jsxеслиallowJsустановлено значение true).

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

Источник

Хотя вы сами ответили на этот вопрос, я хотел бы поделиться своим опытом. Похоже, мой vscode решает выбрать (используя и, скорее всего, ваш случай) и 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;
}
Источник
Другие вопросы по тегам