Sử dụng plugin jQuery trong TypeScript

Question

Khi sử dụng loại bản ghi, tôi có cần phải nhập plugin.d.ts cho mọi js bên ngoài mà tôi sử dụng không? Nói cách khác, tôi có cần tạo một jQuery.d.ts với tất cả các giao diện không?

Answer 1

Vấn đề với các plugin jQuery (và các thư viện dựa trên plugin khác) là bạn không chỉ cần tệp library.d.ts cho thư viện cơ sở, nhưng bạn cũng cần tệp plugin.d.ts cho mỗi plugin. Và bằng cách nào đó, các tệp plugin.d.ts cần mở rộng các giao diện thư viện được định nghĩa trong các tệp library.d.ts. May mắn thay, TypeScript có một tính năng nhỏ tiện lợi cho phép bạn làm điều đó.

Với classes hiện tại chỉ có thể là một định nghĩa hình nón duy nhất của một lớp trong một dự án. Vì vậy, nếu bạn xác định class Foo các thành viên bạn đặt trên Foo là tất cả những gì bạn nhận được. Mọi định nghĩa bổ sung của Foo sẽ dẫn đến lỗi. Tuy nhiên, với interfaces, các thành viên là phụ gia nên nếu bạn xác định interface Bar với một nhóm thành viên, bạn có thể xác định 'thanh giao diện' lần thứ hai để thêm thành viên bổ sung vào interface. Đó là chìa khóa để hỗ trợ các plugin jQuery theo cách mạnh mẽ.

Vì vậy, để thêm hỗ trợ cho một plugin jQuery, bạn sẽ cần phải tạo một tệp plugin.d.ts cho plugin bạn muốn sử dụng. Chúng tôi sử dụng jQuery Templates trong dự án của chúng tôi vì vậy đây là jquery.tmpl.d.ts nộp chúng tôi tạo ra để hỗ trợ thêm cho plugin:

interface JQuery 
{ 
    tmpl(data?:any,options?:any): JQuery; 
    tmplItem(): JQueryTmplItem; 
    template(name?:string):()=>any; 
} 

interface JQueryStatic 
{ 
    tmpl(template:string,data?:any,options?:any): JQuery; 
    tmpl(template:(data:any)=>string,data?:any,options?:any): JQuery; 
    tmplItem(element:JQuery): JQueryTmplItem; 
    tmplItem(element:HTMLElement): JQueryTmplItem; 
    template(name:string,template:any): (data:any)=>string[]; 
    template(template:any): JQueryTemplateDelegate; 
} 

interface JQueryTemplateDelegate { 
    (jQuery: JQueryStatic, data: any):string[]; 
} 

interface JQueryTmplItem 
{ 
    data:any; 
    nodes:HTMLElement[]; 
    key:number; 
    parent:JQueryTmplItem; 
} 

Breaking này xuống điều đầu tiên chúng tôi đã làm được để xác định các phương pháp mà được thêm vào giao diện JQuery. Sau đó chúng ta thêm phương thức vào giao diện JQueryStatic hiển thị khi bạn gõ $.tmpl(); Và cuối cùng, plugin jQuery Templates định nghĩa một số cấu trúc dữ liệu riêng của nó, vì vậy chúng ta cần xác định giao diện cho các cấu trúc đó.

Bây giờ chúng tôi có các giao diện bổ sung được xác định, chúng tôi chỉ cần tham khảo chúng từ tệp .ts tiêu thụ. Để làm điều đó, chúng tôi chỉ thêm các tham chiếu bên dưới vào đầu tệp .ts của chúng tôi và đó là nó. Đối với tập tin đó, TypeScript sẽ thấy cả hai phương thức jQuery cơ bản và các phương thức plugin. Nếu bạn sử dụng nhiều plugin chỉ cần đảm bảo bạn giới thiệu tất cả các tệp plugin.d.ts riêng lẻ của mình và bạn sẽ tốt.

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

Answer 2

Lưu tệp .ts không tự động kích hoạt trình biên dịch trong Visual Studio. Bạn sẽ cần phải xây dựng/xây dựng lại để kích hoạt trình biên dịch.

Khai báo tệp (file.d.ts) cho phép trình biên dịch TypeScript nhận được thông tin loại tốt hơn về các thư viện JavaScript bạn đang sử dụng từ tệp đó. Bạn có thể có giao diện của bạn được xác định tất cả trong một tập tin, hoặc trong nhiều tập tin; điều này sẽ không tạo ra bất kỳ sự khác biệt nào. Bạn cũng có thể "khai báo" các loại/biến mà bạn đang sử dụng từ thư viện bên ngoài bằng cách sử dụng một cái gì đó như:

declare var x: number; 

sẽ cho trình biên dịch xem x là số.

Answer 3

Tôi đã tìm kiếm một d.ts cho jquery.inputmask và cuối cùng tạo ra một đơn giản của riêng tôi. Đó là tại

https://github.com/jpirok/Typescript-jquery.inputmask

hoặc bạn có thể xem mã bên dưới.

Nó sẽ không bao gồm tất cả các trường hợp cho jquery.inputmask, nhưng có lẽ sẽ xử lý nhiều nhất.

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

interface JQueryInputMaskOptions { 
    mask?: string; 
    alias?: string; 
    placeholder?: string; 
    repeat?: number; 
    greedy?: boolean; 
    skipOptionalPartCharacter?: string; 
    clearIncomplete?: boolean; 
    clearMaskOnLostFocus?: boolean; 
    autoUnmask?: boolean; 
    showMaskOnFocus?: boolean; 
    showMaskOnHover?: boolean; 
    showToolTip?: boolean; 
    isComplete?: (buffer, options) => {}; 
    numeric?: boolean; 
    radixPoint?: string; 
    rightAlignNumerics?: boolean; 
    oncomplete?: (value?: any) => void; 
    onincomplete?:() => void; 
    oncleared?:() => void; 
    onUnMask?: (maskedValue, unmaskedValue) => void; 
    onBeforeMask?: (initialValue) => void; 
    onKeyValidation?: (result) => void; 
    onBeforePaste?: (pastedValue) => void; 
} 

interface inputMaskStatic { 
    defaults: inputMaskDefaults; 
    isValid: (value: string, options: inputMaskStaticDefaults) => boolean; 
    format: (value: string, options: inputMaskStaticDefaults) => boolean; 
} 

interface inputMaskStaticDefaults { 
    alias: string; 
} 

interface inputMaskDefaults { 
    aliases; 
    definitions; 
} 

interface JQueryStatic { 
    inputmask: inputMaskStatic; 
} 

interface JQuery { 
    inputmask(action: string): any; 
    inputmask(mask: string, options?: JQueryInputMaskOptions): JQuery; 
} 

Answer 4

Trước khi tạo .d.ts tập tin riêng của bạn cho các plugin, bạn nên kiểm tra để xem liệu nó đã như một thư viện DefinitelyTyped. Ví dụ, sử dụng Typings, bạn có thể chạy lệnh:

typings install dt~bootstrap --global --save 

... và không có bất kỳ mã có thêm bạn sẽ có quyền truy cập vào các plugin Bootstrap khác nhau.

Nếu họ không có plugin bạn đang tìm kiếm, hãy cân nhắc việc đóng góp định nghĩa của riêng bạn.

Answer 5

Sử dụng tệp kê khai .d.ts có lẽ tốt hơn, nhưng thay vào đó bạn cũng có thể sử dụng các loại global augmentation and declaration merging của TypeScript để thêm phương thức vào giao diện của JQuery. Bạn có thể đặt một số thứ như sau trong bất kỳ tệp TypeScript nào của bạn:

declare global { 
    interface JQuery { 
     nameOfPluginMethod(arg: any): JQuery; 
    } 
}