[英]Using SweetAlert2 with TypeScript, could not find a declaration file for module 'sweetalert2/dist/sweetalert2.js'
I'm migrating one of my projects to TypeScript, in that project SweetAlert2 library is used.我正在将我的一个项目迁移到 TypeScript,在该项目中使用了SweetAlert2库。
The default way to import SweetAlert2 (both JS and CSS) is导入 SweetAlert2(JS 和 CSS)的默认方式是
import Swal from 'sweetalert2'
This works fine with TypeScript because there are types in the library: https://github.com/sweetalert2/sweetalert2/blob/master/sweetalert2.d.ts这适用于 TypeScript,因为库中有类型: 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'
This is import for JS only, without styles.这仅用于 JS 导入,没有样式。 With this type of import, I'm getting the TS error:
使用这种类型的导入,我收到 TS 错误:
Could not find a declaration file for module 'sweetalert2/dist/sweetalert2.js'.
ts(7016)
I tried to copy sweetalert2/sweetalert2.d.ts
to sweetalert2/dist/sweetalert2.d.ts
, but got another error:我试图将
sweetalert2/sweetalert2.d.ts
复制到sweetalert2/dist/sweetalert2.d.ts
,但又出现了另一个错误:
File 'node_modules/sweetalert2/dist/sweetalert2.d.ts' is not a module.
ts(2306)
What's going on here and why TS complains about dist/sweetalert2.d.ts
is not a module?这里发生了什么,为什么 TS 抱怨
dist/sweetalert2.d.ts
不是模块?
The current type definitions of SweetAlert does not provide typings for "submodules". SweetAlert 的当前类型定义不提供“子模块”的类型。 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
语法这样,你“一下子”(一个用户在导入时得到什么类型全包^sweetalert2$
),但你没有描述什么是在DIST个别编译后的文件/确切地说,所以是的,它们不能被明确定位。
Try removing the declare module
block entirely in your copied file.尝试在复制的文件中完全删除
declare module
块。 Then, use declare namespace Swal
, and it'll work.然后,使用
declare namespace Swal
,它会起作用。
We should be able to modify the declaration files of sweetalert2 so both simple import and the import of sub-files work.我们应该能够修改sweetalert2的声明文件,这样简单的导入和子文件的导入都可以工作。
Take a look at how I typed graphql-compose so this becomes possible: graphql-compose看看我是如何输入 graphql-compose 的,所以这成为可能: graphql-compose
Each .js file has a .d.ts counterpart, and there is no longer one single file that describes the whole module with declare module
.每个 .js 文件都有一个 .d.ts 对应文件,并且不再有一个单独的文件用
declare module
来描述整个declare module
。
Edit: I tried this approach in you repro, this works well, and we're able to type sweetalert2.all.js
as well.编辑:我在你的
sweetalert2.all.js
尝试过这种方法,效果很好,我们也可以输入sweetalert2.all.js
。 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.
1:1 映射方法更好,但可能更适合较大的库。
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/dist/{**}'
条目添加到单个sweetalert2.d.ts
文件中,该文件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';
}
I was facing same problem but i got my solution form your links sweetalert2 .我遇到了同样的问题,但我从你的链接sweetalert2得到了我的解决方案。
Follow the USAGE section.按照使用部分。
i was using in import SWAl from "sweetalert2/dist/sweetalert2.js".
that is working in new project but not in my old project.那是在新项目中工作,但不在我的旧项目中。 so i moved here and got my solution.
所以我搬到这里并得到了我的解决方案。 just replaced by sweetalert2/dist/sweetalert2.js to sweetalert2
刚刚被sweetalert2/dist/sweetalert2.js 替换为sweetalert2
import Swal from 'sweetalert2';
everyone need to also focus into this line.每个人也需要专注于这条线。 i removed css and js from angular.json file of sweetalert2.
我从sweetalert2的angular.json文件中删除了css和js。
check this steps检查此步骤
projects -> architect -> test -> options -> styles:[] and scripts:[]
项目 -> 架构师 -> 测试 -> 选项 -> 样式:[] 和脚本:[]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.