SVGファイルインポート時の型エラー

💭 起きていること

💡解決策

custom.d.tsに型定義を記述する。
これにより SVGファイルは string 型のモジュールだと認識されるようになる。

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

❓なぜ型定義が必要？

TypeScriptがデフォルトではSVGファイルをモジュールとして扱わないから。

TypeScriptは通常 .ts / .tsx 拡張子を持つファイルをモジュールとして認識する。

SVGファイルはこれに該当しないため、TypeScriptがその型を理解できない。

従って型定義ファイルに *.svg の場合の型を記述することでTypeScriptにSVGファイルの型を伝えている。