Jak mogę zatrzymać błędy składni „właściwość nie istnieje w typie JQuery” podczas używania skryptu Typescript?

80

W mojej aplikacji używam tylko jednej linii jQuery:

$("div.printArea").printArea();

Ale to daje mi błąd maszynopisu:

Właściwość „printArea” nie istnieje w typie JQuery?

Czy ktoś może mi powiedzieć, jak mogę zatrzymać ten błąd?

jquery typescript

— Alan2
źródło

188

Możesz rzucić to na <any>lub rozszerzyć typowanie w jquery, aby dodać własną metodę.

 (<any>$("div.printArea")).printArea();

// Lub dodaj własne niestandardowe metody (zakładając, że zostały dodane przez Ciebie jako część niestandardowej wtyczki)

interface JQuery {
    printArea():void;
}

— PSL
źródło

dając mi:Error:(44, 23) TS2339: Property 'printArea' does not exist on type 'ElementFinder'.

— user47376

Jeśli spróbujesz interface JQuerysposobu w zewnętrznym module i zdefiniujesz parametr funkcji jako typ JQuery i spróbujesz wywołać go z innego pliku, TypeScript będzie narzekać, że istnieją dwa typy o nazwie JQuery, które nie są ze sobą powiązane.

— Sam Rueby

Zadeklarowanie interfejsu wydaje się działać świetnie. Jest też znacznie czystszy niż przesyłanie do <any> wszędzie

— rozszyfrowano

To nie działało dla mnie, ale w końcu natknąłem się na stackoverflow.com/questions/30960386/ ... i zdałem sobie sprawę, że potrzebuję informacji declare global { ... }o deklaracji interfejsu.

— James Hopkin

44

Myślę, że to najbardziej czytelne rozwiązanie:

($("div.printArea") as any).printArea();

— Eldamir
źródło

12

Możesz to przesłać do

(<any>$('.selector') ).function();

Np .: selektor dat inicjuje się przy użyciu jQuery

(<any>$('.datepicker') ).datepicker();

— Wisznu
źródło

3

Na przykład dodałbyś to:

interface JQuery{
    printArea():void;
}

Edycja: ups, basarat jest poprawny poniżej. Nie jestem pewien, dlaczego myślałem, że się kompiluje, ale zaktualizowałem tę odpowiedź.

— AlexB
źródło

Nie. Zawija obiekt znakiem $. To już nie jest statyczne $

— basarat

Hmm, na pewno? Przetestowałem to w projekcie i zadziałało.

— AlexB

tak. Twoja sprawa Sprawa $.inviewport(el)Ops$('selector').printArea

— basarat

Przepraszam, nie chcę się spierać, ale mój kod działa dla mnie. Wydaje się, że pytanie dotyczy tego, jak uzyskać kod do kompilacji, więc jeśli mój kod się kompiluje, jaki jest z tym problem? Uwaga, mój drugi przykład z użyciem printArea () również działa.

— AlexB

$('selector').printAreakompiluje? Nie sądzę. $.printAreabędzie się jednak kompilować. Byłaś bardzo uprzejma, więc bez obrazy lub zamierzonego zachowania :)

— basarat

2

Ponieważ printArea jest wtyczką jQuery, nie jest zawarta w jquery.d.ts.

Musisz utworzyć plik definicji jquery.printArea.ts.

Jeśli utworzysz kompletny plik definicji dla wtyczki, możesz przesłać go do DefinitelyTyped .

— Albin Sunnanbo
źródło

I upewnij się, że twój plik tsconfig.json jest również poprawnie skonfigurowany. Jeśli ma ustawienie „typy”, rozpoznawane będą tylko wymienione typy. Jeśli nie, to rozpozna wszystko w node_modules / @ types

— Dan Cancro

2

Możesz też napisać to tak:

let elem: any;
elem = $("div.printArea");
elem.printArea();

— iqqmuT
źródło

2

Możesz także użyć składni ignorowania zamiast (lub lepiej notacji `` jak każdy ''):

// @ts-ignore
$("div.printArea").printArea();

— Guntram
źródło