在 TypeScript 中使用 SweetAlert2，找不到模块“sweetalert2/dist/sweetalert2.js"的声明文件 [英] Using SweetAlert2 with TypeScript, could not find a declaration file for module 'sweetalert2/dist/sweetalert2.js'

问题描述

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

I'm migrating one of my projects to TypeScript, in that project SweetAlert2 library is used.

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

The default way to import SweetAlert2 (both JS and CSS) is

import Swal from 'sweetalert2'

这适用于 TypeScript，因为库中有类型:https://github.com/sweetalert2/sweetalert2/blob/master/sweetalert2.d.ts

This works fine with TypeScript because there are types in the library: https://github.com/sweetalert2/sweetalert2/blob/master/sweetalert2.d.ts

但在我的项目中导入的方式是这样的:

But in my project the way of importing is this:

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

这只是 JS 的导入，没有样式.使用这种类型的导入，我收到 TS 错误:

This is import for JS only, without styles. With this type of import, I'm getting the TS error:

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

ts(7016)

我尝试将 sweetalert2/sweetalert2.d.ts 复制到 sweetalert2/dist/sweetalert2.d.ts，但出现另一个错误:

I tried to copy sweetalert2/sweetalert2.d.ts to sweetalert2/dist/sweetalert2.d.ts, but got another error:

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

ts(2306)

这是怎么回事，为什么 TS 会抱怨 dist/sweetalert2.d.ts 不是模块?

What's going on here and why TS complains about dist/sweetalert2.d.ts is not a module?

推荐答案

SweetAlert 当前的类型定义不提供子模块"的类型.当您使用 declare module 语法 像这样，你一次"输入整个包(用户从 ^sweetalert2$ 导入时得到的)，但你没有描述 dist 中单个编译文件中的内容/确切地说，是的，它们不能被明确定位.

The current type definitions of SweetAlert does not provide typings for "submodules". When you use the declare module syntax like this, you type the whole package "at once" (what an user gets when importing from ^sweetalert2$), but you're not describing what's in the individual compiled files in dist/ exactly, so yes, they can't be targeted explicitly.

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

Try removing the declare module block entirely in your copied file. Then, use declare namespace Swal, and it'll work.

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

We should be able to modify the declaration files of sweetalert2 so both simple import and the import of sub-files work.

看看我是如何输入 graphql-compose 以便这成为可能的:graphql-compose

Take a look at how I typed graphql-compose so this becomes possible: graphql-compose

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

Each .js file has a .d.ts counterpart, and there is no longer one single file that describes the whole module with declare module.

我在你的 repro 中尝试过这种方法，效果很好，我们也可以输入 sweetalert2.all.js.不过，以下解决方案可能更简单(文件更少，构建脚本更简单).1:1 映射方法更好，但可能更适合大型图书馆.

I tried this approach in you repro, this works well, and we're able to type sweetalert2.all.js as well. The following solution may be simpler though (less files, simpler build scripts). The 1:1 mapping approach is better but is probably more suited to larger libraries.

另一种可能性是将 declare module 'sweetalert2/dist/{**}' 条目添加到单个 sweetalert2.d.ts 文件中，该文件重新导出默认模块每个 dist/ 变体的内容:

Another possibility is to add declare module 'sweetalert2/dist/{**}' entries to the single sweetalert2.d.ts file, that reexports the default module contents for each dist/ variant:

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

这篇关于在 TypeScript 中使用 SweetAlert2，找不到模块“sweetalert2/dist/sweetalert2.js"的声明文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！