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

при использовании typescript мне нужно импортировать плагин.d. ts для каждого внешнего js, который я использую? Другими словами, Мне нужно создать проект.d. ts со всеми интерфейсами?

5 67
typescript

5 ответов:

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

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

таким образом, чтобы добавить поддержку для данного плагина jQuery вам нужно будет создать плагин.D. TS файл для плагина, который вы хотите использовать. Мы используем Шаблоны jQuery в нашем проекте так вот jquery.тмпл.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 плагин определяет некоторые из своих собственных структур данных, поэтому нам нужно было определить интерфейсы для этих структур.

теперь, когда мы определили дополнительные интерфейсы, нам просто нужно ссылаться на них из потребления .TS файлов. Для этого мы просто добавляем ссылки ниже в верхней части нашего .файл TS и все. Для этого файла TypeScript увидит как базовые методы jQuery, так и методы плагина. Если вы используете несколько плагинов, просто убедитесь, что вы refernce все ваши индивидуальные Плагины.D. TS файлы, и вы должны быть хорошими. 

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

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

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

declare var x: number;

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

4

Я искал 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;
}
3

перед созданием собственного для плагина, вы должны проверить, чтобы увидеть, является ли это уже как DefinitelyTyped библиотека. Например, с помощью Typings, вы можете выполнить команду:

typings install dt~bootstrap --global --save

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

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

2

С помощью .d.ts файл объявления, вероятно, лучше, но в качестве альтернативы вы также можете использовать TypeScript глобальное увеличение и объявление слияния для добавления методов в интерфейс JQuery. Вы можете разместить что-то вроде следующего в любом из ваших файлов TypeScript:

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