将 SweetAlert2 与 TypeScript 一起使用，找不到模块'sweetalert2/dist/sweetalert2.js'的声明文件

Question

我正在使用我的一个项目迁移到打字稿，在该项目中使用了SweetAlert2库。

导入SweetAlert2(JS和CSS(的默认方法是

import Swal from 'sweetalert2'

这与TypeScript可以正常工作，因为库中有类型：https：//github.com/sweetalert2/sweetalert2/blob/master/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不是模块？

Answer 1

SweetAlert的当前类型定义不提供"子模型"的打字。当您使用这样的declare module语法时，您会立即键入整个软件包(用户从^sweetalert2$导入时获得的内容(，但是您并未描述单个中的dist/cript dist/cription中的内容，所以是的，是的，他们不能明确针对目标。

尝试在复制文件中完全删除declare module块。然后，使用 declare namespace Swal，然后使用。

我们应该能够修改sweetalert2的声明文件，以便简单导入和子文件的导入工作。

看一下我如何键入graphQl-compose，这样就有可能：GraphQl-Compose

每个.js文件都有一个.d.ts对应物，并且不再有一个用declare module描述整个模块的单个文件。

编辑：我在您的repro中尝试了这种方法，这很好，我们也可以键入sweetalert2.all.js。但是，以下解决方案可能更简单(更少的文件，更简单的构建脚本(。1：1映射方法更好，但可能更适合较大的库。

另一种可能性是将declare module 'sweetalert2/dist/{**}'条目添加到单个sweetalert2.d.ts文件中，该输入重新删除每个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';
}

Answer 2

我遇到了同样的问题，但是我得到了我的解决方案，您的链接sweetAlert2。

遵循用法部分。

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

在新项目中工作，但在我的旧项目中不工作。所以我搬到这里得到了解决方案。刚刚被 SweetAlert2/Dist/SweetAlert2.js 替换为 sweetAlert2

import Swal from 'sweetalert2';

每个人都需要专注于这一行。我从 angular.json sweetAlert2的文件中删除了CSS和JS。

检查此步骤

项目 - ＆gt;建筑师 - ＆GT;测试 - ＆GT;选项 - ＆gt;样式：[]和脚本：[]