Làm cách nào để ngăn lỗi cú pháp “thuộc tính không tồn tại trên kiểu JQuery” khi sử dụng Loại chỉ định?

80

Tôi chỉ sử dụng một dòng jQuery trong ứng dụng của mình:

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

Nhưng điều này mang lại cho tôi một lỗi Typecript:

Thuộc tính 'printArea' không tồn tại trên loại JQuery?

Ai đó có thể cho tôi biết làm thế nào tôi có thể ngăn lỗi này xuất hiện không?

jquery typescript

— Alan2
nguồn

188

Bạn có thể truyền nó sang <any>hoặc mở rộng kiểu gõ jquery để thêm phương thức của riêng bạn.

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

// Hoặc thêm các phương thức tùy chỉnh của riêng bạn (Giả sử điều này do chính bạn thêm vào như một phần của plugin tùy chỉnh)

interface JQuery {
    printArea():void;
}

— PSL
nguồn

cho tôi:Error:(44, 23) TS2339: Property 'printArea' does not exist on type 'ElementFinder'.

— user47376

Nếu bạn thử interface JQuerycách trong một mô-đun bên ngoài và xác định một tham số hàm như một kiểu JQuery và cố gắng gọi nó từ một tệp khác, TypeScript sẽ phàn nàn rằng có hai kiểu có tên JQuery không liên quan đến nhau.

— Sam Rueby

Khai báo giao diện có vẻ hoạt động tốt. Nó cũng sạch hơn nhiều so với truyền đến <nhiều> ở khắp mọi nơi

— giải mã

Điều này không hiệu quả với tôi, nhưng cuối cùng tôi tình cờ xem được stackoverflow.com/questions/30960386/… và nhận ra rằng tôi cần declare global { ... }khai báo giao diện.

— James Hopkin

44

Tôi nghĩ đây là giải pháp đáng đọc nhất:

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

— Eldamir
nguồn

12

Bạn có thể truyền nó tới

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

Ví dụ: khởi tạo bộ chọn ngày bằng jquery

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

— vishnu
nguồn

3

Đối với ví dụ của bạn, bạn sẽ thêm cái này:

interface JQuery{
    printArea():void;
}

Chỉnh sửa: oops, basarat là chính xác bên dưới. Tôi không chắc tại sao tôi nghĩ rằng nó đang được biên dịch nhưng tôi đã cập nhật câu trả lời này.

— AlexB
nguồn

Không. Anh ta đang quấn một vật bằng $. Nó không phải tĩnh $ nữa

— basarat

Hmm, bạn chắc chứ? Tôi đã thử nghiệm điều đó trong một dự án và nó đã hoạt động.

— AlexB

vâng. Trường hợp của bạn $.inviewport(el)Ops trường hợp$('selector').printArea

— basarat

Xin lỗi, không có ý ngụy biện, nhưng mã của tôi phù hợp với tôi. Câu hỏi dường như là về việc lấy mã để biên dịch, vì vậy nếu mã của tôi biên dịch, vấn đề với nó là gì? Lưu ý, ví dụ thứ hai của tôi sử dụng printArea () cũng hoạt động.

— AlexB

$('selector').printAreabiên dịch? Tôi không nghĩ vậy. $.printAreasẽ biên dịch mặc dù. Bạn đã rất lịch sự như vậy không có hành vi phạm tội được thực hiện hoặc dự định :)

— basarat

2

Vì printArea là một plugin jQuery nên nó không được bao gồm trong jquery.d.ts.

Bạn cần tạo tệp định nghĩa jquery.printArea.ts.

Nếu bạn tạo một tệp định nghĩa hoàn chỉnh cho plugin, bạn có thể muốn gửi tệp đó cho DefiniedlyTyped .

— Albin Sunnanbo
nguồn

Và đảm bảo rằng tsconfig.json của bạn cũng được thiết lập đúng. Nếu nó có cài đặt "loại" thì chỉ những loại được liệt kê mới được nhận dạng. Nếu không, sau đó nó sẽ nhận ra mọi thứ trong node_modules / @ loại

— Dan Cancro

2

Bạn cũng có thể sử dụng cú pháp bỏ qua thay vì sử dụng (hoặc tốt hơn là ký hiệu 'như bất kỳ'):

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

— Guntram
nguồn

1

Bạn cũng có thể viết nó như thế này:

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

— iqqmuT
nguồn