fel TS2339: Egenskapen 'modal' finns inte på typ 'JQuery'

Jag använder Typescript med AngularJS. Jag har ett problem med modaler som använder typade definitioner av jQuery-biblioteket. Jag får följande fel: 'error TS2339: Egenskapen 'modal' finns inte på typen 'JQuery'.

Version: jQuery-bibliotek, version 1.10.x/2.0.x Definitioner: https://github.com/borisyankov/DefinitelyTyped

Kod

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

Jag refererar till jquery.d.ts i angular.d.ts

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

och min globala leverantörsreferensfil ser ut så här:

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

Svar #1

med nyare versioner av TypeScript (>v2 tror jag):

npm install -D @types/bootstrap

Redigera: Som hughjdavey sa i sin kommentar, behöver du också följande importrader:

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

Svar #2

Ditt problem orsakas av bristen på en egenskap med namnet modal i filen jquery.d.ts.

Om du är säker på att detta fungerar i ren JS kan du lura med det så här

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

Du kan också hitta en ytterligare d.ts-fil där detta alternativ redan har definierats.

Försök att överväga detta bibliotek som redan har haft modal-alternativet

Lycka till!

Svar #3

I mitt fall var jag tvungen att använda

npm install -D @types/bootstrap

och sedan var jag tvungen att importera bootstrap

import * as bootstrap from 'bootstrap';

men det viktigaste steget var att ta bort jquery

import * as $ from 'jquery';

annars gav det mig detta fel:

TypeError: $ (...).modal är inte en funktion

Svar #4

När jag uppgraderade Angular till version 9 stötte jag på detta problem.

Här är min lösning, jag delade den för den som berörs.

Egenskapen 'modal' finns inte på typen 'JQuery'

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

ändra till

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

Och

Egenskapen 'DataTable' finns inte på typen 'JQuery'

$('#realTimeTable').DataTable()

ändra till

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

Med

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

ändra till

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

Uppdaterad :

typomvandla till any fungerar ibland inte, och den slutliga lösningen är att ändra deklarationen från import * as $ from 'jquery' till declare var $: any;

Relaterade artiklar