错误 TS2339：“JQuery”类型上不存在属性“modal”

error TS2339: Property 'modal' does not exist on type 'JQuery'

提问by TomekB

I'm using Typescript with AngularJS. I have a problem with modals using typed definition of jQuery library. I get the following error: 'error TS2339: Property 'modal' does not exist on type 'JQuery'.'

我在 AngularJS 中使用 Typescript。我在使用 jQuery 库的类型化定义时遇到模态问题。我收到以下错误：'错误 TS2339：'JQuery' 类型上不存在属性 'modal'。

Version: jQuery library, version 1.10.x / 2.0.x Definitions: https://github.com/borisyankov/DefinitelyTyped

版本：jQuery 库，版本 1.10.x / 2.0.x 定义：https: //github.com/borisyankov/DefinitelyTyped

Code

代码

$scope.delete = function (id) {
  Photo.get({id: id}, function(result) {
     $scope.photo = result;
     $('#deletePhotoConfirmation').modal('show');// error line 
  });
};

I'm referencing to jquery.d.tsin angular.d.ts

我引用到jquery.d.ts的angular.d.ts

<reference path="../jquery/jquery.d.ts" />

and my global vendor reference file looks like:

我的全球供应商参考文件如下所示：

<reference path='../vendor/types/angular/angular.d.ts' />
<reference path='../vendor/types/angular/angular-mocks.d.ts' />
<reference path='../vendor/types/jasmine/jasmine.d.ts' />

回答by Tucker

with newer versions of typescript (>v2 i believe):

使用较新版本的打字稿（我相信> v2）：

npm install -D @types/bootstrap

Edit: As hughjdavey said in his comment, you also need the following import lines: import * as bootstrap from "bootstrap"; import * as $ from 'jquery';

编辑：正如hughjdavey 在他的评论中所说，您还需要以下导入行： import * as bootstrap from "bootstrap"; import * as $ from 'jquery';

回答by Oleh Dokuka

Your problem is caused by the lack of property with name modalin the jquery.d.tsfile.

你的问题是缺乏属性与名称造成modal的jquery.d.ts文件。

If you sure that this work in pure JS you can trick with it like this

如果你确定这在纯 JS 中工作，你可以像这样欺骗它

$scope.delete = function (id) {
  Photo.get({id: id}, function(result) {
     $scope.photo = result;
     (<any>$('#deletePhotoConfirmation')).modal('show');
  });
};

Also, you can find additional d.tsfile where this option has already been defined.

此外，您还可以找到d.ts已定义此选项的其他文件。

Try to consider thislibrary that has already had modaloption

尝试考虑这个已经有modal选项的库

Good Luck!

祝你好运！

回答by Zohab Ali

In my case I had to use

就我而言，我不得不使用

npm install -D @types/bootstrap

and then I had to import bootstrap

然后我不得不导入引导程序

import * as bootstrap from 'bootstrap';

but most important step was to removejquery

但最重要的一步是删除jquery

import * as $ from 'jquery';

otherwise it was giving me this error:

否则它给了我这个错误：

TypeError: $(...).modal is not a function

类型错误：$(...).modal 不是函数

回答by izik f

this work for me, i add in first row:
declare var $ :any;
this declare $type is any,

这对我有用，我在第一行添加：
declare var $ :any;
这个声明$类型是any，

回答by gchao

Try installing the typings for Bootstrap DefinitelyTyped

尝试为 Bootstrap absoluteTyped 安装类型

typings install --global --save dt~bootstrap

typings install --global --save dt~bootstrap

回答by cyperpunk

Just add

只需添加

import * as bootstrap from "bootstrap";
import * as $ from "jquery";

in your app.module.ts

在你的 app.module.ts

And install these packages

并安装这些包

npm install @types/jquery --save-dev

npm install @types/jquery --save-dev

npm install @types/bootstrap --save-dev

npm install @types/bootstrap --save-dev

回答by Mohammad Dayyan

I could resolve it as follows:

我可以按如下方式解决它：

import * as $ from "jquery";

($('#menuModal') as any).modal('toggle');

回答by Hien Nguyen

When I upgrade angular to version 9, I faced this issue.

当我将 angular 升级到版本 9 时，我遇到了这个问题。

Here are my solution, I shared for whom concerned.

这是我的解决方案，我为关心的人分享。

Property 'modal' does not exist on type 'JQuery'

'JQuery' 类型不存在属性 'modal'

$('#ManualMinMaxModal').modal('show');

change to

改成

($('#ManualMinMaxModal') as any).modal('show');

And

和

Property 'DataTable' does not exist on type 'JQuery'

“JQuery”类型上不存在属性“DataTable”

$('#realTimeTable').DataTable()

change to

改成

($('#realTimeTable') as any).DataTable()

With

和

!$.fn.DataTable.isDataTable('#realTimeTable')

change to

改成

!($.fn as any).DataTable.isDataTable('#realTimeTable')

Updated:

更新：

cast to any sometime not work, and finally solution is change declare from import * as $ from 'jquery'to declare var $: any;

强制转换到任何时候都不起作用，最后的解决方案是将声明从更改import * as $ from 'jquery'为declare var $: any;

回答by Kawau

Yep, I too had to include both of these imports in order to make my app publishable by angular:

是的，我也必须包含这两个导入，以使我的应用程序可通过 angular 发布：

import * as bootstrap from "bootstrap";
import * as $ from "jquery";

I added them in the component that was using jQuery.

我将它们添加到使用 jQuery 的组件中。