跳至主要内容

Typescript_引入 svg 與 png 並定義 index.d.ts

如果你使用 webpack，可以通過創建自定義類型文件來實現這一目的。

創建一個名為 custom.d.ts 的文件，並填入以下內容：

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

然後在 tsconfig.json 中添加 custom.d.ts，如下所示：

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

在 index.d.ts 中全域規範副檔名​

例如

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

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

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

這樣可以讓 TypeScript 能夠理解這些文件副檔名，並允許你在程式碼中像其他模塊一樣引入這些資源。

參考資料​

https://webpack.js.org/guides/typescript/#importing-other-assets