通过 webpack 在 Angular 中导入 Jquery答案

【问题标题】：Importing Jquery in Angular via webpack通过 webpack 在 Angular 中导入 Jquery
【发布时间】：2020-12-17 11:44:33
【问题描述】：

基本上我只想稍后在我的项目中加载 jquery，以通过使用 webpack 导入它来减少包大小

  import(/*webpackChunkName: "jquery" */ "jquery").then(({default: $}) => {

但是我收到了：

 error TS2459: Type 'JQueryStatic' has no property 'default' and no string index signature.

我相信这是由于 Typescript 造成的，无论如何在 typescript 允许的项目中稍后导入库？

我知道我能够以这种方式加载 gsap，没有任何问题。

【问题讨论】：

您需要--esModuleInterop 或至少--alllowSyntheticDefaultImports
它们对应于tsconfig.json 中"compilerOptions" 对象的属性，即{"compilerOptions": {"esModuleInterop": true}}
这很奇怪，因为我知道这行得通。确保您的工具是最新的
应该足够了。确保你的打字稿和加载器是最新的
先生，如果我能吻你，我会的。我一定会阅读这些属性。

【解决方案1】：

如果您确定您期望的导入格式，您可以通过在您的导入代码中添加类型断言来让 TS 知道它：

 (import(/*webpackChunkName: "jquery" */ "jquery") as Promise<{default: any}>).then(({default: $}) => {...});

当然，如果您知道default 属性的值，您可以在此处键入它，而不是通过使用any 丢失类型信息。

【讨论】：