TS导入镜像时无法从node_modules中找到模块

Question

我的 .tsx 文件中有以下代码：

import L from 'leaflet';
import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';

Typescript 正在抱怨第二行和第三行。不仅是 linter，还有 TS 编译器本身。

具体来说，linter 表示“它找不到模块‘blabla/icon.png’或其相应的类型声明。但是，导入 L 是可以的。

任何人都知道为什么会发生这种情况以及如何解决这个问题？

我的 tsconfig 文件如下所示：

{
  "compilerOptions": {
      "outDir": "./dist/",        // path to output directory
      "sourceMap": true,          // allow sourcemap support
      "strictNullChecks": true,   // enable strict null checks as a best practice
      "module": "esnext",         // specify module code generation
      "jsx": "react",             // use typescript to transpile jsx to js
      "target": "es5",            // specify ECMAScript target version
      "allowJs": true,             // allow a partial TypeScript and JavaScript codebase
      "baseUrl": ".",
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "paths": {
    }
  },
  "include" : ["src"],
  "exclude": ["node_modules", "dist", "config", ".vscode"]
}

先感谢您。

Answer 1

我通过创建一个包含以下内容的 index.d.ts 文件解决了这个问题：

declare module '*.png';