Question

在尝试使用我的代码库实现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错误：

属性＆＃39; scrollTop＆＃39;在＆＃39; JQLite＆＃39;。
类型中不存在

如何以一种它知道可以使用jQuery的方式加载AngularJS并随之扩展它？

Answer 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: '$'
          }]
      }]
}

了解更多详情goto expose-loader

Answer 2

基于@ParthRaval共享的链接，我能够通过将JQLite基类型转换为'any'类型来解决问题。事实上它确实是一个类型转换问题，而不是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;
  }

}];

在TypeScript模块中使用jQuery扩展AngularJS

2 个答案: