Импорт изображений в TypeScript React - «Не удается найти модуль»
Я пытаюсь импортировать изображения для использования внутри компонента React с TypeScript. Я использую упаковщик Parcel (а не Webpack).
Я создал файл .d.ts внутри проекта с расширением файла изображения и включил его в tsconfig.json. Однако, когда я пытаюсь импортировать образ, TS кричит мне о Cannot find module.
Моя структура проекта:
+ src
+ assets
- image.jpg
+ components
- Box.tsx
- App.tsx
- index.d.ts
- index.html
- index.tsx
- tsconfig.json
- tslint.json
Я пробовал импортировать образ в App.tsx вот так. Код VS подчеркнул '../assets/image.jpg' и сказал Cannot find module '../assets/image.jpg'.
import * as React from 'react';
import * as img from '../assets/image.jpg';
const Box = props => {
// do things...
}
export default Box;
Обсуждения, которые я нашел в Интернете, указывают на необходимость самого определения файла .d.ts, поэтому я создал этот файл index.d.ts с помощью этой строки.
declare module '*.jpg';
Затем добавили "include": ["./src/index.d.ts"] в tsconfig.json после "compilerOptions" : {...}.
Что я пропустил? Как исправить ошибку, которую выдает TS?
можно сделать что-то вроде этого stackoverflow.com/a/66251201/10447251
Ответы 5
Если вы буквально записали "include": ["./src/index.d.ts"] в tsconfig.json и у вас нет настройки "files", это означает, что проект, определенный tsconfig.json, включает только один файл ./src/index.d.ts. Когда вы открываете любой другой файл в VS Code, VS Code использует отдельный экземпляр языковой службы, который не использует ваш tsconfig.json. Отрегулируйте настройку "include", чтобы она соответствовала всем файлам .ts и .tsx в вашем проекте, или просто удалите его и полагайтесь на поведение по умолчанию, включающее все файлы в каталоге, содержащем tsconfig.json.
Раунд 2
TypeScript игнорирует index.d.ts, поскольку предполагает, что index.d.ts генерируется из index.tsx, а index.tsx, скорее всего, обновлен. Назовите свой файл index.d.ts как-нибудь иначе, например, declaration.d.ts.
Я действительно буквально написал "include": ["./src/index.d.ts"] ?. Теперь я удалил эту строку и перезапустил VS Code, но проблема осталась (Cannot find module '../assets/image.jpg'). Может ли проблема быть вызвана сборщиком? Но если VS Code использует отдельную языковую службу, я думаю, не имеет значения, какой сборщик используется.
Неважно, я думаю, что нашел проблему. См. Обновленный ответ.
Ух ты, это волшебство, спасибо тебе огромное !! Почти все утро я пытался понять, почему не работает :)))
Ваш раунд 2 - это подарок, который продолжает приносить. Вы только что прояснили мою проблему с index.d.ts и SVG, спасибо!
есть работа вокруг этого Например,
import logo from "../../assets/logo.png"
измените это на
const logo = require("../../assets/logo.png")
Выдает ошибку типа require statement not part of an import statement
установить requireJS (или был commonJS)
требуется работает, если вы используете response <17.0.1, 17.0.1 и выше, используйте import
создайте файл index.d.ts в папке src и добавьте эту строку
declare module '*.jpg';
Работает, но не могли бы вы просветить меня на почему и как, это работает? Это связано с машинописным текстом или с vscode? Это похоже на игнорирование ошибки во всех проблемах с линтингом? Просьба уточнить. Спасибо.
@Rishav Я думаю, что это сокращенная декларация typescriptlang.org/docs/handbook/modules.htmlAll imports from a shorthand module will have the any type.
что так странно, если я закрою файл index.d.ts в коде vs. затем ошибка возвращается. только когда файл открыт, он работает. Кто-нибудь знает почему?
Я вставил:
/// <reference types = "react-scripts" />
из более старого проекта в моем: react-app-env.d.ts, и он работал.
В последних версиях CRA (когда выбран язык TS) этот файл автоматически добавляется в папку src и содержит единственную строку, показанную выше. Это директива для ссылки на типы из react-scripts.
обе строчки - это комментарии?
Это не просто комментарии. Что касается JavaScript, да, это комментарии. Однако первая строка - это директива для eslint, чтобы игнорировать правило линтинга для следующей строки. Eslint ищет комментарии такого типа перед линковкой кода. Вторая строка - это способ ссылки на типы в ваших файлах машинописного текста. См. -> typescriptlang.org/docs/handbook/triple-slash-directives.htm l
Подавление ошибки не устраняет основную проблему и является ужасной практикой!
@MichaelEakins Вторая строка действительно очищает ошибку, а не подавляет ее, как вы предлагаете. Первая строка практически бесполезна для проблемы, описанной в этом вопросе.
Создать модуль / тип
# src/types/images.d.ts
declare module '*.jpg';
declare module '*.jpeg';
Измените tsconfig.json
{
"compilerOptions": {
"typeRoots" : ["node_modules/@types", "src/types"]
}
}
См. github.com/Microsoft/TypeScript/issues/15146