typescript kullanırken kullandığım her harici js için plugin.d.ts ithal etmek gerekiyor? Bir başka deyişle, tüm arabirimler ile jQuery.d.ts oluşturmak gerekiyor?
Daktilo jQuery eklentisi kullanarak
oy
66
5 cevaplar
oy 98
98
jQuery eklentileri (ve diğer eklenti tabanlı kütüphaneler) ile sorun, baz kütüphanesi için bir library.d.ts dosyası gerekiyor, ama aynı zamanda her eklenti için bir plugin.d.ts dosyası gerekiyor sadece olmasıdır. Ve her nasılsa thes plugin.d.ts dosyalar library.d.ts dosyalarında tanımlanan kütüphane arabirimleri genişletebilir gerekir. Neyse ki, typescript sadece bunu sağlayan bir şık küçük bir özelliğe sahiptir.
Ile classesorada şu anda sadece bir proje içinde bir sınıfın tek kanonik tanım olabilir. Eğer bir tanımlarsanız Yani class Foosen koymak üyelerini Fooalmak tümü. Herhangi ek tanımları Foobir hataya neden olur. Ile interfacestanımladığınız eğer öyleyse Ancak üyeler katkı olan interface Barüyelerin kümesiyle sen 'arabirim bar' için ek üye eklemek için ikinci kez tanımlayabilirsiniz interface. Yani kesinlikle yazılı şekilde jQuery eklentileri destekleyen anahtarıdır.
Yani kullanmak istediğiniz eklenti için bir plugin.d.ts dosyası oluşturmak için ihtiyacımız olacak belirli bir jQuery eklentisi desteği eklemek için. Biz kullanmak jQuery Şablonları işte jquery.tmpl.d.ts biz bu eklenti desteği eklemek için oluşturulan dosya bulunuyor projemizde:
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;
}
Yaptığımız ilk şey aşağı bu Breaking ekledi olsun yöntemleri tanımlamaktır JQueryarayüzüne. Bunlar intellisense almak ve yazarken tip kontrolü izin $('#foo').tmpl();biz yöntemleri eklendi Sonraki JQueryStaticyazarken ortaya arayüzüne $.tmpl();Ve nihayet jQuery Şablonları eklentisi kendi veri yapılarının bazı yüzden bu yapılar için arayüzleri tanımlamak için gerekli tanımlar.
Şimdi ek arayüzleri sadece tüketen ts dosyaları bunlara başvuruda gerekir definied biz bildirildi. Biz sadece bizim ts dosyanın başına aşağıdaki başvurular ekleyin ve bu kadar Bunu yapmak için. Bu dosya için typescript baz jQuery yöntem ve eklenti yöntemleri hem göreceksiniz. Birden eklentileri kullanırsanız sadece bireysel plugin.d.ts tüm dosyaları refernce emin olun ve iyi olmalıdır.
/// <reference path="jquery.d.ts"/>
/// <reference path="jquery.tmpl.d.ts" />
oy 4
4
Bir Ts dosyayı kaydetme otomatik olarak Visual Studio derleme tetiklemez. Sen / inşa derleme tetiklemek için yeniden inşa etmek gerekecektir.
Beyan dosyaları (file.d.ts) typescript derleyici bu dosyadan kullandığınız JavaScript kütüphaneleri hakkında daha iyi tip bilgi edinmenizi sağlar. Eğer arayüzleri tek bir dosyada veya birden fazla dosyalarında tanımlanan olabilir; bu herhangi bir fark olmamalıdır. Ayrıca böyle bir şey kullanarak harici kütüphanelerden kullandığınız türleri / değişkenleri "beyan" olabilir:
declare var x: number;
hangi bir sayı olarak x tedavisinde derleyici söyleyecektir.
oy 3
3
Ben jquery.inputmask için d.ts arayan ve sonunda kendime ait bir basit birini yaratan oldum. Orada
https://github.com/jpirok/Typescript-jquery.inputmask
veya aşağıdaki kodunu görebilirsiniz.
Bu jquery.inputmask için tüm durumları kapsıyor olmaz, ancak belki de en işleyecektir.
///<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;
}
oy 2
2
Kendi oluşturmadan önce .d.tseklenti için dosyayı, bunun zaten var olup olmadığını görmek için kontrol etmelisiniz DefinitelyTyped kütüphanesine. Örneğin, kullanarak typings , sen komutunu çalıştırabilirsiniz:
typings install dt~bootstrap --global --save
... ve herhangi bir ekstra kod olmadan çeşitli Bootstrap eklentileri de erişebileceksiniz.
onlar aradığınız eklenti yoksa, kendi tanımını katkıda düşünün.
oy 0
0
Bir kullanarak .d.tsbildirim dosyası muhtemelen daha iyi olduğunu, ancak alternatif olarak da typescript en kullanabilirsiniz küresel büyütme ve beyan birleştirme JQuery'nın arabirimine yöntemleri eklemek. Eğer typescript dosyalarının herhangi aşağıdaki gibi bir şey yerleştirebilirsiniz:
declare global {
interface JQuery {
nameOfPluginMethod(arg: any): JQuery;
}
}