Question

我正在使用带有AngularJS的Typescript。我使用jQuery库的类型定义的模态有问题。我收到以下错误：＆＃39;错误TS2339：属性＆＃39;模态＆＃39;在类型＆＃39; JQuery＆＃39;。＆＃39;

上不存在

版本：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 
  });
};

我引用了jquery.d.ts

中的angular.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' />

Answer 1

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

npm install -D @types/bootstrap

编辑：正如hughjdavey在评论中所说，你还需要以下导入行： import * as bootstrap from＆＃34; bootstrap＆＃34 ;; 导入*作为来自＆＃39; jquery＆＃39;;

的$

Answer 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库

祝你好运！

Answer 3

尝试安装Bootstrap DefinitelyTyped

的输入法

typings install --global --save dt~bootstrap

Answer 4

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

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

类型“ JQuery”上不存在属性“模式”

$('#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;

Answer 5

这对我有用，我在第一行中添加：
declare var $ :any;
此声明的$类型为any

Answer 6

就我而言，我不得不使用

npm install -D @types/bootstrap

然后我必须导入引导程序

import * as bootstrap from 'bootstrap';

但最重要的步骤是删除 jQuery

import * as $ from 'jquery';

否则，它给了我这个错误：

TypeError：$（...）。modal不是函数

Answer 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

Answer 8

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

import * as $ from "jquery";

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

Answer 9

是的，为了使我的应用可以按角度发布，我也必须同时包含这两个导入：

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

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

Answer 10

Angular 8+ 版本的解决方案：

不工作：

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

改为使用这个：

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

对于进口：

import * as $ from 'jquery';

祝你好运

Answer 11

您是否在 angular.json 中添加了 bootstrap.js？

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

错误TS2339：属性＆＃39;模态＆＃39;在类型＆＃39; JQuery＆＃39;上不存在

11 个答案: