在 TypeScript 模块中使用 jQuery 扩展 AngularJS答案

【问题标题】：Extending AngularJS with jQuery in a TypeScript module在 TypeScript 模块中使用 jQuery 扩展 AngularJS
【发布时间】：2018-06-13 23:17:28
【问题描述】：

在尝试使用我的代码库实现 TypeScript 时，我遇到了这个问题。似乎我过去按顺序加载 jQuery 和 AngularJS 的方式，AngularJS 会利用 jQuery 的存在并使用它的功能扩展自己。但是，当在模块中本地导入时，AngularJS 会被单独加载，并且似乎无法使用 jQuery 扩展自身。因此，当我做这样的事情时：

import * as $ from 'jquery';
import * as angular from 'angular';

export default ['$window', function($window) {
  let position = angular.element($window).scrollTop();
}];

我收到这个 TypeScript 错误：

类型“JQLite”上不存在属性“scrollTop”。

我如何加载 AngularJS，使其知道可以使用 jQuery 并使用它进行扩展？

【问题讨论】：

请访问：-stackoverflow.com/questions/24984014/…
使用 webpack 或?angular 之类的任何捆绑程序从窗口对象中获取 jQuery。因此它不会附加到窗口对象。
@zabusa 确实如此。但是有没有办法解决这个问题，可能取决于你如何设置 webpack 配置？
@LucasvanHeerikhuizen 是的。如果您使用的是 webpack，则有办法或任何其他捆绑程序
@ParthRaval 在您的链接主题中建议的解决方案似乎在特定情况下有效，将其减少为 jQuery - 或者在这种情况下是 JQLite - 问题。必须将所有内容包装在 (angular.element($window)).scrollTop();不过看起来确实很可怕！

标签： javascript jquery angularjs typescript

【解决方案1】：

如果您使用的是 webpack，那么我们可以使用 expose-loader 库将 jQuery 加载到窗口对象。

webpack v1 使用

module: {
  loaders: [
    { test: require.resolve("jquery"), loader: "expose-loader?$!expose-loader?jQuery" },
  ]
}

webpack v2 使用

module: {
  rules: [{
          test: require.resolve('jquery'),
          use: [{
              loader: 'expose-loader',
              options: 'jQuery'
          },{
              loader: 'expose-loader',
              options: '$'
          }]
      }]
}

更多详情请转至expose-loader

【讨论】：

【解决方案2】：

基于@ParthRaval 共享的链接，我能够通过将 JQLite 基础类型转换为“任何”类型来解决问题。所以事实上它被证明是一个类型转换问题，而不是 AngularJS 没有完全加载和使用 jQuery。将它包装在一个函数中使它不那么难看。

import * as $ from 'jquery';
import * as angular from 'angular';

export default ['$window', function($window) {

  let position = JQLiteFix(angular.element($window)).scrollTop();

  function JQLiteFix(query) {
    return <any>query;
  }

}];

【讨论】：