使用 TypeScript 导入 SVG 文件时出现类型错误

当我尝试如下方式导入 svg 文件时,出现 Cannot find module '../../images/twitter.svg' 类型错误。TypeScript | Webpack文档中有类似的描述,是通过创建 SVG 文件的类型,告诉编译器正常处理 TypeScript 文件以外的任何内容。

1
import SVGTwitter from "../../images/twitter.svg" // Cannot find module '../../images/twitter.svg' or its corresponding type declarations. ts(2307)

怎么办

  1. custom.d.ts 创建定义 TS 以外的类型的文件
    如下所示创建一个文件,custom.d.ts并在那里定义 svg 的扩展类型。

    1
    2
    3
    4
    5
    6
    // custom.d.ts

    declare module '*.svg' {
    const content: any;
    export default content;
    }
  2. tsconfig.json读取创建的类型文件

    1
    2
    3
    4
    5
    // tsconfig.json

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

参考

Importing Other Assets - TypeScript | Webpack