typescriptでsvgファイルをインポートできません

でtypescript(*.tsx)ファイル私はこの文でSVGファイルをインポートすることはできません。

import logo from './logo.svg';

Transpilerさんのコメント：[ts] cannot find module './logo.svg'. 私のsvgファイルはただ<svg>...</svg>です。

しかし、.jsファイルでは、まったく同じインポートステートメントで問題なくインポートできます。ts transpilerに何らかの方法で設定する必要があるsvgファイルのタイプと関係があると思います。

これをtsファイルで機能させる方法を教えてください。

webpackを使用する場合は、カスタムタイプファイルを作成することでこれを行うことができます。

次の内容のcustom.d.tsという名前のファイルを作成します。

declare module "*.svg" {
  const content: any;
  export default content;
}

追加custom.d.tsにtsconfig.json以下のように

"include": ["src/components", "src/custom.d.ts"]

ソース：https : //webpack.js.org/guides/typescript/#importing-other-assets

使用を指摘してくれたsmarxに感謝しますrequire()。したがって、私の場合は次のようになります。

const logo = require("./logo.svg") as string;

* .tsxファイルで正常に動作します

custom.d.ts正しいタイプのファイルを追加します（私はsrcディレクトリのルートパスにファイルを作成しました）（RedMattに感謝します）。

declare module '*.svg' {
  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
  export default content;
}

svg-react-loaderまたはその他のをインストールしてから、

• メインのSVGローダーとして使用する
• または、コードベースを移行していて、作業部分（JS）に触れたくない場合は、インポートでローダーを指定します。

import MySVG from '-!svg-react-loader!src/assets/images/name.svg'

次に、JSXタグとして使用します。

function f() { 
  return (<MySVG />); 
}

私が見つけた解決策：ReactJSプロジェクトのファイルreact-app-env.d.tsで、コメントのスペースを削除するだけです。

前

// / <reference types="react-scripts" />

後

/// <reference types="react-scripts" />

あなたを助けたいです

REACT + typescriptチュートリアルを試すときにも同じ問題が発生しました。
私にとってうまくいったのは、次のインポートステートメントでした。

import * as logo from 'logo.svg'

これがpackage.jsonの依存関係です。

  "dependencies": {
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-scripts-ts": "3.1.0"
  },

それが誰かを助けることを願っています。

TypeScriptでn オンコードアセットを使用するには、これらのインポートのタイプを遅延させる必要があります。これには、プロジェクト内のTypeScriptのカスタム定義を示すcustom.d.tsファイルが必要です。

.svgファイルの宣言を設定しましょう：

custom.d.ts

declare module "*.svg" {
  const content: any;
  export default content;
}

ここでは、.svgで終わるインポートを指定し、モジュールのコンテンツをanyとして定義することにより、SVGの新しいモジュールを宣言しています。

これを実行する別の方法があります。SVGコンポーネントを作成します。これを行ったのはrequire、imports と一緒にcommonJS ステートメントを使用していたことがバグだったからです。

    // eslint-disable-next-line spaced-comment
/// <reference types="react-scripts" />

puglin slintを使用している場合、コメントであると考えて彼が無効にした可能性がありますが、svgを読み取らない場合は、このタイプのスクリプトモジュールが必要なので、行を無効にして満足してください。