使用TypeScript和SweetAlert2，无法找到模块“sweetalert2/dist/sweetalert2.js”的声明文件。

Question

我是一名有用的助手，可以为您进行翻译。以下是需要翻译的内容：

我正在将我的一个项目迁移到TypeScript，在该项目中使用SweetAlert2库。

导入SweetAlert2（包括JS和CSS）的默认方式是

import Swal from 'sweetalert2'

这在TypeScript中可以正常工作，因为库中有类型: https://github.com/sweetalert2/sweetalert2/blob/master/sweetalert2.d.ts。

但是在我的项目中，导入方式如下：

import Swal from 'sweetalert2/dist/sweetalert2.js'

这仅适用于JS，不包括样式。使用此类型的导入，我会收到TS错误：

Could not find a declaration file for module 'sweetalert2/dist/sweetalert2.js'. 

ts(7016)

我尝试将 sweetalert2/sweetalert2.d.ts 复制到 sweetalert2/dist/sweetalert2.d.ts，但是遇到了另一个错误：

File 'node_modules/sweetalert2/dist/sweetalert2.d.ts' is not a module. 

ts(2306)

这里发生了什么事情？为什么TS会抱怨dist/sweetalert2.d.ts不是一个模块？

- Limon Monte

---

我在我的ts文件中使用了'import Swal from 'sweetalert2/dist/sweetalert2.js';'，没有出现错误。 - Sagar Chaudhary

@SagarChaudhary 我创建了一个简单的仓库，其中包含最少量的代码以重现问题：https://github.com/limonte/swal-ts。你能否请看一下，也许能找到你的项目和 limonte/swal-ts 之间的差异。谢谢！ - Limon Monte

Answer 1

当前的SweetAlert类型定义没有提供“子模块”的类型定义。当您使用declare module语法像这样时，您将整个包“一次性”输入（从^sweetalert2$导入时用户获取的内容），但是您没有准确描述dist/目录中各个编译文件的内容，因此无法明确地进行定位。尝试完全删除复制文件中的declare module块。然后，使用declare namespace Swal，它会奏效。我们应该能够修改sweetalert2的声明文件，以便简单导入和子文件导入都可行。看看我如何输入graphql-compose以使其成为可能：graphql-compose。每个.js文件都有一个.d.ts副本，不再有一个使用declare module描述整个模块的单个文件。编辑：我在您的repro中尝试了这种方法，这很有效，并且我们也能够对sweetalert2.all.js进行类型定义。但以下解决方案可能更简单（较少的文件，较简单的构建脚本）。 1:1映射方法更好，但可能更适用于较大的库。另一种可能性是在单个sweetalert2.d.ts文件中添加declare module 'sweetalert2/dist/{**}'条目，它重新导出每个dist/变体的默认模块内容：

declare module 'sweetalert2' {
    // Current contents of the file, unchanged
}

declare module 'sweetalert2/dist/sweetalert2.js' {
    export * from 'sweetalert2';
    // "export *" does not matches the default export, so do it explicitly.
    export { default } from 'sweetalert2';
}

declare module 'sweetalert2/dist/sweetalert2.all.js' {
    export * from 'sweetalert2';
    export { default } from 'sweetalert2';
}

- Morgan Touverey Quilling

---

谢谢你，Morgan！记录一下，修复的PR链接：https://github.com/sweetalert2/sweetalert2/pull/1693 - Limon Monte

Answer 2

我曾遇到同样的问题，但从您提供的链接sweetalert2中找到了解决方案。

请按照用法部分操作。

i was using in import SWAl from "sweetalert2/dist/sweetalert2.js".

这段代码在我之前的项目中无法正常工作，但在我的新项目中可以。我将其替换为sweetalert2，用sweetalert2/dist/sweetalert2.js来解决问题。

import Swal from 'sweetalert2';

每个人都需要关注这一行。我从sweetalert2的angular.json文件中移除了css和js。

请检查以下步骤：

项目 -> 架构师 -> 测试 -> 选项 -> 样式：[] 和 脚本：[]

- pankaj kumar