Při použití strojopis musím k importu plugin.d.ts pro každý externí js, že mohu použít? Jinými slovy, musím vytvořit jQuery.d.ts se všemi rozhraními?
Pomocí jQuery plugin na psacím stroji
hlasů
66
5 odpovědí
hlasů 98
98
Problém s jQuery pluginů (a jiných knihoven na bázi plug) je to, že nejen že budete potřebovat library.d.ts soubor pro základní knihovnu, ale také potřebovat plugin.d.ts soubor pro každý plugin. A nějak THES plugin.d.ts soubory je třeba rozšířit knihovní rozhraní definované v souborech library.d.ts. Naštěstí strojopisem má šikovný malý funkci, která vám umožní udělat právě to.
Se classestam v současné době může být jen jeden cononical definice třídy v rámci projektu. Takže pokud jste definovat class Foočleny si na sebe Foovšichni dostanete. Jakékoliv další definice Foobude mít za následek chyby. Se interfacesvšak členové se sčítají, takže pokud si definovat interface Barsadou členů můžete definovat ‚rozhraní bar‘ podruhé přidat další členy k interface. To je klíč k podpoře jQuery pluginů v silně napsaný způsobem.
Takže přidat podporu pro danou jQuery plugin, který budete muset vytvořit plugin.d.ts soubor zásuvného modulu, který chcete použít. Používáme jQuery šablony v našem projektu, takže tady je soubor jquery.tmpl.d.ts jsme vytvořili přidat podporu pro tento 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;
}
Lámání to po první věc, kterou jsme udělali, je definovat metody, které si přidali do JQueryrozhraní. Ty vám umožní získat IntelliSense a typ kontroly při psaní $('#foo').tmpl();další jsme přidali metody na JQueryStaticrozhraní, které ukazují, až když zadáte $.tmpl();A konečně jQuery šablony plugin definuje některé ze svých vlastních datových struktur, takže jsme museli definovat rozhraní pro tyto konstrukce.
Teď, když jsme přídavné rozhraní je vymezeno prostě muset odkazovat z spotřebou Ts souborů. K tomu, že jsme jen přidat odkazy níže na vrchol našeho souboru Ts a to je vše. Z tohoto souboru, strojopisem vidět jak základní jQuery metody a způsoby plugin. Pokud používáte více pluginy jen ujistit, že vztažnou všechny vaše individuální plugin.d.ts soubory a vy byste měli být dobré.
/// <reference path="jquery.d.ts"/>
/// <reference path="jquery.tmpl.d.ts" />
hlasů 4
4
Uložení .TS soubor není automaticky spustit kompilaci ve Visual Studio. Budete muset stavět / rebuild pro spuštění kompilace.
Deklarují soubory (file.d.ts) umožňuje strojopisu kompilátor získat lepší informace o typu o knihovnách JavaScript, který používáte z tohoto souboru. Můžete mít vaše rozhraní je definováno v jednom souboru, nebo ve více souborech; by to nemělo žádný rozdíl. Můžete také „deklarovat“ se typů / proměnné, které jsou pomocí externích knihoven s využitím něco jako:
declare var x: number;
který vám řekne kompilátoru k léčbě x jako číslo.
hlasů 3
3
Hledal jsem po dobu d.ts pro jquery.inputmask a nakonec vytvořil jednoduchý jednu z mé vlastní. Je to na
https://github.com/jpirok/Typescript-jquery.inputmask
Případně se můžete podívat níže uvedený kód.
Nebude se vztahovat na všechny případy pro jquery.inputmask, ale bude pravděpodobně zabývat se většinou.
///<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;
}
hlasů 2
2
Před vytvořením vlastní .d.tssoubor pro plugin, měli byste zkontrolovat, zda je to už jako DefinitelyTyped knihovny. Například pomocí typizace , můžete spustit příkaz:
typings install dt~bootstrap --global --save
... a bez dalšího kódu budete mít přístup k různým bootstrap pluginů.
Pokud nemají plugin, který hledáte, zvažte přispívá svou vlastní definici.
hlasů 0
0
Použití .d.tssouboru prohlášení je asi lepší, ale jako alternativu můžete použít i na psacím stroji v globální prsou a prohlášení slučování přidání metody rozhraní jQuery je. Můžete umístit něco jako následující některý z vašich strojopisem soubory:
declare global {
interface JQuery {
nameOfPluginMethod(arg: any): JQuery;
}
}