error TS2339: Property 'modal' does not ex

问题:

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

Version: jQuery library, version 1.10.x / 2.0.x Definitions: 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.ts in 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' />

回答1:

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

npm install -D @types/bootstrap

回答2:

Your problem is caused by the lack of property with name modal in the jquery.d.ts file.

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

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

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

Try to consider this library that has already had modal option

Good Luck!

回答3:

Try installing the typings for Bootstrap DefinitelyTyped

typings install --global --save dt~bootstrap

回答4:

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 remove jquery

import * as $ from 'jquery';

otherwise it was giving me this error:

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

回答5:

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

回答6:

Just add

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

in your app.module.ts

And install these packages

npm install @types/jquery --save-dev

npm install @types/bootstrap --save-dev