9
0

More than 1 year has passed since last update.

TypeScriptでsvgファイルのインポート時の型エラーを解消する

Last updated at Posted at 2022-06-21

はじめに

TypeScriptでSVGファイルをimportした時に型エラーが出てしまう

以下のようにsvgファイルをインポートしようとしたところ、cannot find module 'asset/star.svg'と型エラーが出てしまっています
スクリーンショット 2022-06-21 9.15.22.png
TypeScript公式にも同様の記述がありますが、SVGファイルの型を作成することで。TypeScriptファイル以外も正常に処理するようにコンパイラーへ伝えます。

どうやるか

TS以外の型を定義する、custom.d.tsファイルを作成

以下のようにcustom.d.tsファイルを作成し、そこでsvgの拡張子の型を定義します。

custom.d.ts
declare module '*.svg' {
  const content: any;
  export default content;
}

tsconfig.jsonで作成した型ファイルを読み込む

tsconfig.jsonで作成した型ファイルを読み込みます。

tsconfig.json
{
  "include": ["./src/**/*", "src/custom.d.ts"]
}

おわりに

以上で、問題なくsvgファイルの型をコンパイラーが認識し、型エラーが解消していると思います。
今回は、TypeScriptで外部アセットにデータをインポートする時に発生する型エラーの解消について記載しました。

9
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
0