Ha géppel tudok importálni plugin.d.ts minden külső js, hogy tudom használni? Más szóval, akkor is kell, hogy hozzon létre egy jQuery.d.ts minden interfész?
JQuery plugint géppel
szavazat
66
5 válasz
szavazat 98
98
A kérdés jQuery plugin (és más bővítmény alapú könyvtárak), hogy nem csak szüksége van egy library.d.ts fájlt a bázis könyvtár, de akkor is kell egy plugin.d.ts fájl minden plugin. És valahogy thes plugin.d.ts fájlokat ki kell terjeszteni a könyvtár interfészek meghatározott library.d.ts fájlokat. Szerencsére géppel van egy remek kis funkció, amely lehetővé teszi, hogy nem csak ezt.
Az classesott jelenleg csak egyetlen cononical meghatározása egy osztály egy projekten belül. Tehát, ha meg egy class Footagjainak teszel Foominden kapsz. Minden további meghatározásai Fooeredményez hibát. Az interfacesazonban a tagok adalékanyag, így ha meghatározzák interface Bar, egy sor tagjai megadhatjuk „interface Bar” másodszor, így további tagokat a interface. Ez a kulcs, hogy támogatja jQuery plugin egy erősen típusos módon.
Tehát támogatást adni egy adott jQuery plugint fogsz létre kell hozni egy plugin.d.ts fájl a plugin a használni kívánt. Az általunk használt jQuery Templates projektünkben így itt a jquery.tmpl.d.ts fájlt hoztunk létre, hogy támogatást adni, hogy a 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 le ezt az első dolog, amit csináltunk, hogy meghatározza a módszereket, amelyek hozzáadódnak a JQueryfelületen. Ezek segítségével kap IntelliSense és típusellenőrzés ha beír $('#foo').tmpl();Ezután hozzáadjuk módszerek a JQueryStaticfelület, amely megjelenik, ha írja $.tmpl();És végül a jQuery Templates bővítmény határozza meg néhány saját adatszerkezeteket ezért meghatározásához szükséges interfészek az e szerkezetekhez.
Most, hogy a további kapcsolódási pontok definied csak azt kell hivatkozni rájuk a fogyasztó .ts fájlokat. Ehhez már csak hozzá az alábbi hivatkozások a tetején a .ts fájlt, és ennyi. Az, hogy a fájl, géppel fogja látni mind a bázis jQuery módszerek és a plugin módszereket. Ha több plugins csak győződjön meg róla refernce az összes egyéni plugin.d.ts fájlokat, és legyen jó.
/// <reference path="jquery.d.ts"/>
/// <reference path="jquery.tmpl.d.ts" />
szavazat 4
4
Mentése .ts fájlt nem indít el automatikusan összeállítása a Visual Studio. Meg kell építeni / újjáépíteni kiváltó összeállításához.
Állapítsa fájlok (file.d.ts) lehetővé teszi a géppel fordító jobb típusú információkat a JavaScript könyvtárak használata a fájlból. Lehetőség van az interfészek meghatározása minden egy fájl vagy több fájl; ez nem változtat semmin. Azt is „nyilvánítja” a típus / változók használata külső könyvtárak segítségével olyasmi, mint:
declare var x: number;
amely megmondja, hogy a fordító kezelésére x számként.
szavazat 3
3
Már keresi a d.ts a jquery.inputmask és végül létre egy egyszerű saját. Ez a
https://github.com/jpirok/Typescript-jquery.inputmask
vagy láthatjuk az alábbi kódot.
Ez nem terjed ki minden esetben jquery.inputmask, de valószínűleg kezelni a legtöbb.
///<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;
}
szavazat 2
2
Létrehozása előtt a saját .d.tsfájl a plugin, akkor ellenőrizze, hogy ez már a DefinitelyTyped könyvtárban. Például, ha a tipizálását , akkor ezt a parancsot:
typings install dt~bootstrap --global --save
... és anélkül, hogy külön kódot akkor férhetnek hozzá a különböző Bootstrap dugó.
Ha nincs meg a bővítmény keres, úgy hozzájárul a saját meghatározás.
szavazat 0
0
Egy .d.tsnyilatkozat fájl valószínűleg jobb, de alternatívaként is használható géppel a globális mellnagyobbítás és nyilatkozat egyesülő hozzá módszereket JQuery felület. Akkor tegyük valami hasonlót el az Ön által gépelt fájlok:
declare global {
interface JQuery {
nameOfPluginMethod(arg: any): JQuery;
}
}