Typescript - 如何将 png 文件导入到我的 typescript 文件中？答案

【问题标题】：Typescript - How can I import png files into my typescript file?Typescript - 如何将 png 文件导入到我的 typescript 文件中？
【发布时间】：2020-03-22 03:45:58
【问题描述】：

我使用 Parcel 编译器建立了自己的 typescript 项目，并让所有东西都在内置服务器上运行。我实现了 pixi.js 并想将 .png 文件导入到我的 .ts 文件中。但是当我尝试导入时它说它找不到模块，即使两个文件都在同一个文件夹中？我错过了什么？

我尝试了以下操作

npm install @types/node --save-dev

tsconfig.json（位于我的根文件夹中）

{
  "compilerOptions": {
    "types": ["node"],
    "typeRoots": ["node_modules/@types"]
  }
}

【问题讨论】：

如果您使用 webpack 进行捆绑，请查看 stackoverflow.com/questions/43638454/…。如果没有，请使用 webpack（或类似的）捆绑并查看该问题。
我正在使用 Parcel，有没有办法用 Parcel 做到这一点？
是的，Parcel 的作用与 webpack 相似，所以如果你为 png 模块添加类型定义，它应该可以工作
我安装了@types/node 并编辑了我的 tsconfig，但它似乎没有工作。这是添加类型定义的正确方法吗？我用 tsconfig 编辑了问题
我找到了npmjs.com/package/@types/parcel-bundler/v/1.12.0 并安装了它，但在任何地方都找不到如何设置它。你知道怎么做吗？

标签： typescript parcel type-definition

【解决方案1】：

据我从您给出的示例中可以猜到，这与 Parcel 没有任何关系。

Parcel v1 将在内部调用 tsc，并且编译器将简单地针对未知文件扩展名（如 .png）发出错误，因为纯 TS 项目将只能在 import 代码文件（.js，.ts , .tsx, .jsx 或 .json) 不涉及像 Parcel 或 Webpack 这样的模块捆绑器。

Bundlers 允许import 其他文件类型通过将它们转换为可以在您的项目中使用的有效模块（由 Webpack 中的加载器实现，Parcel 确实更透明地处理它）。

为了“说服”编译器，这些类型的导入是好的并且让模块知道，wildcard module declarations 可以被使用。例如，要编译 .png 文件导入，您可以使用以下声明创建一个文件 globals.d.ts 或类似文件：

declare module '*.png';

这已经足以满足编译器的要求（here 是 Parcel 特定的相关问题）。

希望，它会有所帮助。

【讨论】：

在哪里创建 globals.d.ts？
只需在项目目录中的某处（tsconfig.json 所在的位置）创建一个文件。 TS 将使用默认的包含/排除/文件选项自动抓取文件。