Использование плагина jQuery в TypeScript

Ответ 1

Проблема с плагинами jQuery (и другими плагинами) заключается в том, что вам нужен не только файл library.d.ts для базовой библиотеки, но вам также нужен файл plugin.d.ts для каждого плагина. И как-то файлы thes plugin.d.ts должны расширять библиотечные интерфейсы, определенные в файлах library.d.ts. К счастью, TypeScript имеет отличную небольшую функцию, которая позволяет вам делать именно это.

С classes в настоящее время может быть только одно кононическое определение класса внутри проекта. Поэтому, если вы определяете class Foo, вы все, что вы ставите на Foo, все, что вы получаете. Любые дополнительные определения Foo приведут к ошибке. Однако с interfaces члены являются аддитивными, поэтому, если вы определяете interface Bar с набором элементов, вы можете определить "панель интерфейса" второй раз, чтобы добавить дополнительных членов в interface. Это ключ к поддержке плагинов jQuery строго типизированным способом.

Итак, чтобы добавить поддержку для данного плагина jQuery, вам понадобится создать файл plugin.d.ts для плагина, который вы хотите использовать. Мы используем jQuery Templates в нашем проекте, так что вот файл jquery.tmpl.d.ts, который мы создали, чтобы добавить поддержку этого плагина:

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;
}

Прерывая это, первое, что мы сделали, это определить методы, которые добавляются в интерфейс JQuery. Это позволяет вам получать intellisense и проверку типов при вводе $('#foo').tmpl(); Далее мы добавили методы в интерфейс JQueryStatic, которые появляются при вводе $.tmpl(); И, наконец, jQuery Templates плагин определяет некоторые из своих собственных структур данных, поэтому нам нужно было определить интерфейсы для этих структур.

Теперь, когда мы определили дополнительные интерфейсы, нам просто нужно ссылаться на них из потребляющих файлов .ts. Для этого мы просто добавляем ссылки ниже в начало нашего файла .ts и его. Для этого файла TypeScript будет видеть как базовые методы jQuery, так и методы плагина. Если вы используете несколько плагинов, просто убедитесь, что вы ссылаетесь на все ваши отдельные файлы plugin.d.ts, и вы должны быть хорошими.

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

Ответ 2

Сохранение файла .ts автоматически не запускает компиляцию в Visual Studio. Вам нужно будет построить/перестроить, чтобы вызвать компиляцию.

Объявить файлы (file.d.ts) позволяет компилятору TypeScript получить более подробную информацию о типах библиотек JavaScript, которые вы используете из этого файла. Вы можете определить свои интерфейсы в одном файле или в нескольких файлах; это не должно иметь никакого значения. Вы также можете "объявить" типы/переменные, которые вы используете из внешних библиотек, используя что-то вроде:

declare var x: number;

который подскажет компилятору рассматривать x как число.

Ответ 3

Я искал d.ts для jquery.inputmask и, наконец, создал простую мою. Он на

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

или вы можете увидеть код ниже.

Он не будет охватывать все случаи для jquery.inputmask, но, вероятно, справится с большинством.

    ///<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;
}

Ответ 4

Перед созданием собственного файла .d.ts для плагина, вы должны проверить, уже ли он как библиотека DefinitelyTyped. Например, используя Typings, вы можете запустить команду:

typings install dt~bootstrap --global --save

... и без какого-либо дополнительного кода у вас будет доступ к различным плагинам Bootstrap.

Если у них нет плагина, который вы ищете, подумайте о том, чтобы внести свое собственное определение.