Question

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

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

打字稿抱怨第二行和第三行。不仅是linter，还是TS编译器本身。

具体地说，lint说：“它找不到模块'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';

Answer 2

有人知道为什么会这样吗？

因为import statement仅适用于JS modules，并且（这很明显）图像文件不是JS模块。

由于导入模块和模块捆绑器已有很长的历史，因此存在一些使静态资产看起来像JS模块的黑客（例如，https://github.com/rollup/awesome#other-file-imports）。可以通过以下方式配置捆绑工具链：CSS资产看起来像JS模块，并且所说的JS模块实际上是运行的JS代码（其作用是将包装的CSS资产附加到文档主体中）。 / p>

可以将此类破解应用于图像资产，但是由于语义未标准化，因此行为将取决于工具链的配置方式（例如，比较@rollup/plugin-url，@rollup/plugin-image，{{3} }，rollup-plugin-file-as-blob和rollup-plugin-imagemin，所有这些都允许import图像资产，但是行为却千差万别……而且这仅适用于基于汇总的工具链，我什至没有考虑使用webpack ，包裹或其他此处）。

...以及如何解决？

不要像导入JS代码一样导入图像资产，并且要注意您的工具链。

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

2 个答案: