[解決済み] TypeScript Reactで画像をインポートする - "Cannot find module".

質問

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 が投げるエラーを修正するにはどうしたらよいでしょうか。

どのように解決するのですか？

もしあなたが文字どおり "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 .