Импорт изображений в 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 Code подчеркнуто '../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 бросает?

Ответ 1

Если вы буквально написали "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.

Ответ 2

например, есть обходной путь,

import logo from "../../assets/logo.png"

изменить это на

const logo =  require("../../assets/logo.png")

Ответ 3

создайте файл index.d.ts в папке src и добавьте эту строку

declare module '*.jpg';