在 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不是模块？

Answer 1

SweetAlert 当前的类型定义不提供“子模块”的类型。当您使用这样的declare module语法时，您“立即”键入整个包（用户从 导入时得到的内容），但您没有准确描述 dist/ 中各个编译文件中的内容，所以是的，他们可以'没有明确的目标。^sweetalert2$

declare module尝试完全删除复制文件中的块。然后，使用declare namespace Swal，它就会起作用。

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

看看我如何输入 graphql-compose，以便这成为可能：graphql-compose

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

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';

每个人也需要专注于这一行。我从sweetalert2 的angular.json文件中删除了 css 和 js。

检查这个步骤

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