При использовании машинописного мне нужно импортировать plugin.d.ts для каждого внешнего JS, которые я использую? Другими словами, мне нужно, чтобы создать jQuery.d.ts со всеми интерфейсами?
Использование JQuery плагин в машинописном
голоса
66
5 ответов
голоса 98
98
Проблема с JQuery плагинов (и других библиотек на основе плагинов) является то, что вы не только нужен library.d.ts файл для базовой библиотеки, но вы также должны plugin.d.ts файл для каждого плагина. И как-то Thes plugin.d.ts файлы необходимо расширить библиотечные интерфейсы, определенные в файлах library.d.ts. К счастью, машинопись есть отличная маленькая особенность, которая позволяет вам сделать это.
С classesтам в настоящее время может быть только один cononical определением класса в рамках проекта. Так что, если вы определили class Fooчлен вы положили на Fooвсе вы получите. Любые дополнительные определения , Fooприведет к ошибке. С interfaces, однако, члены являются аддитивными , так что если вы определяете interface Barс набором элементов вы можете определить «интерфейс BAR» во второй раз , чтобы добавить дополнительные элементы к interface. Это ключ к поддержке JQuery плагинов в сильно типизированных образом.
Таким образом , чтобы добавить поддержку для данного JQuery плагина вы собираетесь нужно создать plugin.d.ts файл плагина вы хотите использовать. Мы используем Jquery шаблоны в нашем проекте , так вот 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 Шаблоны плагин определяет некоторые из своих собственных структур данных , поэтому мы должны определить интерфейсы для этих структур.
Теперь, когда мы дополнительные интерфейсы определяемых нам просто нужно ссылаться на них из потребляющего .ts файлов. Чтобы сделать это, мы просто добавить ссылки ниже в верхней части нашего файла .ts и это все. Для этого файла, машинопись будет видеть обе базовые методы JQuery и методы плагина. Если вы используете несколько плагинов просто убедитесь, что вы Refernce все ваши индивидуальные plugin.d.ts файлы и вы должны быть хорошо.
/// <reference path="jquery.d.ts"/>
/// <reference path="jquery.tmpl.d.ts" />
голоса 4
4
Сохранение ts-файл не будет автоматически запускать компиляцию в Visual Studio. Вам нужно будет построить / восстановить для запуска компиляции.
Объявляют файлы (file.d.ts) позволяют машинопись компилятору получить более полную информацию о типе библиотеках JavaScript, которые вы используете из этого файла. Вы можете иметь ваши интерфейсы определены в одном файле или в нескольких файлах; это не должно иметь никакого значения. Вы можете также «объявить» Тип / переменные, которые вы используете из внешних библиотек, используя что-то вроде:
declare var x: number;
которая сообщит компилятору рассматривать й как число.
голоса 3
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;
}
голоса 2
2
Перед тем как создать свой собственный .d.tsфайл для плагина, вы должны проверить, является ли это уже в качестве DefinitelyTyped библиотеки. Например, с помощью типизации , вы можете выполнить команду:
typings install dt~bootstrap --global --save
... и без какого-либо дополнительного кода вы будете иметь доступ к различным Bootstrap плагинов.
Если они не имеют плагина, который вы ищете, рассмотреть вопрос о внесении собственного определения.
голоса 0
0
Использование .d.tsфайла декларация, вероятно , лучше, но в качестве альтернативы вы можете также использовать машинопись в глобальном увеличении и декларация слияния для добавления методов интерфейса JQuery в. Вы можете поместить что - то вроде следующего в любой из ваших машинопись файлов:
declare global {
interface JQuery {
nameOfPluginMethod(arg: any): JQuery;
}
}