错误 TS2339：“JQuery”类型上不存在属性“模态”答案

【问题标题】：error TS2339: Property 'modal' does not exist on type 'JQuery'错误 TS2339：“JQuery”类型上不存在属性“模态”
【发布时间】：2015-12-20 12:35:27
【问题描述】：

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

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

代码

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

我在angular.d.ts 中引用了jquery.d.ts

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

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

<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' />

【问题讨论】：

$scope.delete = function (id) { Photo.get({id: id}, function(result) { $scope.photo = result; $('#deletePhotoConfirmation').modal( 'show'); // 错误行 }); };
我在 'angular.d.ts' 文件中引用了 'jquery.d.ts'： /// 我的全球供应商参考文件如下所示： /// /// ///
@TomekB 请不要在 cmets 中发布代码，编辑问题发布在那里，标签下方的问题底部有编辑链接
stackoverflow.com/a/53098414/5361964 解释了解决此问题的所有步骤

标签： jquery modal-dialog typescript

【解决方案1】：

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

npm install -D @types/bootstrap

编辑：正如hughjdavey 在他的评论中所说，您还需要以下导入行：从“引导程序”导入 * 作为引导程序；从'jquery'导入*作为$；

【讨论】：

这在一个安装了 jquery 类型的项目中对我有用——它添加到了 jQuery 界面中，这样$(modal-selector).modal('show') 等就可以很好地编译
我还必须将 import * as bootstrap from "bootstrap"; 添加到我的 app.module.ts 中，否则 IntelliJ 会停止抱怨，但它仍然无法在命令行上编译并出现相同的错误。不管你怎么称呼它（不必是引导程序）。为了绝对清楚，我在同一个文件中还有import * as $ from "jquery";，这让我可以在我的组件中使用$(...)。
谢谢@hughjdavey！！！包括那些特定的导入声明......我无法相信这是多么模糊，因为它必须是多么普遍的需求？！？
我不知道为什么，但这对我来说不能正常工作......有时它可以工作。但大多数时候，它不起作用......你知道为什么吗？我运行命令并在组件 ts 文件中导入 bootstrap.js 但仍然失败
如果将“bootstrap”添加到 tsconfig.json 中“compilerOptions”对象的“types”属性中，则可以避免对“bootstrap”的未使用引用污染代码。

【解决方案2】：

您的问题是由于jquery.d.ts 文件中缺少名称为modal 的属性引起的。

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

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

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

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

祝你好运！

【讨论】：

我已经检查了'jquery.simplemodal.d.ts'。很好用，谢谢！

【解决方案3】：

就我而言，我不得不使用

npm install -D @types/bootstrap

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

import * as bootstrap from 'bootstrap';

但最重要的一步是删除 jquery

import * as $ from 'jquery';

否则它会给我这个错误：

TypeError: $(...).modal 不是函数

【讨论】：

【解决方案4】：

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

【讨论】：

你在哪里添加的

【解决方案5】：

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

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

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

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

改成

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

还有

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

$('#realTimeTable').DataTable()

改成

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

与

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

改成

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

更新：

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

【讨论】：

【解决方案6】：

尝试安装 Bootstrap 的肯定类型

typings install --global --save dt~bootstrap

【讨论】：

【解决方案7】：

只需添加

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

在你的app.module.ts

并安装这些包

npm install @types/jquery --save-dev

npm install @types/bootstrap --save-dev

【讨论】：

【解决方案8】：

我可以这样解决：

import * as $ from "jquery";

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

【讨论】：

【解决方案9】：

是的，为了让我的应用可以通过 Angular 发布，我也必须包含这两个导入：

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

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

【讨论】：

【解决方案10】：

Angular 8+ 版本的解决方案：

不工作：

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

改用这个：

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

对于进口：

import * as $ from 'jquery';

祝你好运

【讨论】：

【解决方案11】：

您是否将 bootstrap.js 添加到您的 angular.json 中？

"scripts": [
   "node_modules/jquery/dist/jquery.min.js",
   "node_modules/bootstrap/dist/js/bootstrap.min.js"
],

【讨论】：