Met behulp van jQuery plugin met de schrijfmachine

Question

Met behulp van jQuery plugin met de schrijfmachine

stemmen

66

Bij het gebruik van de schrijfmachine moet ik een plugin.d.ts importeren voor elke externe js die ik gebruik? Met andere woorden, moet ik een jQuery.d.ts met alle interfaces te creëren?

typescript

De vraag is gesteld op 04/10/2012 om 03:29
bron van user MuriloKunze

In andere talen...

5 antwoorden

stemmen

4

een Ts bestand op te slaan niet automatisch leiden tot compilatie in Visual Studio. U moet bouwen / herbouwen aan de compilatie te activeren.

files verklaren (file.d.ts) laat de typoscript compiler beter soort informatie over de JavaScript-bibliotheken die u gebruikt in dat bestand. U kunt uw interfaces gedefinieerd alles in een bestand of in meerdere bestanden; dit zou geen verschil maken. U kunt ook "verklaren" de types / variabelen die u gebruikt in externe bibliotheken met behulp van iets als:

declare var x: number;

die zal de compiler vertellen om x te behandelen als een nummer.

antwoordde op 04/10/2012 om 04:24
bron van user mohamed hegazy

stemmen

3

Ik ben al op zoek naar een d.ts voor jquery.inputmask en uiteindelijk creëerde een eenvoudige één van mijn eigen land. Het is bij

https://github.com/jpirok/Typescript-jquery.inputmask

of u kunt de code hieronder.

Het zal niet voor alle gevallen voor jquery.inputmask, maar zal waarschijnlijk het meest te behandelen.

    ///<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;
}

antwoordde op 05/09/2014 om 20:50
bron van user Jpirok

stemmen

2

Voor het maken van uw eigen .d.tsbestand voor de plugin, moet u controleren om te zien of het al als een DefinitelyTyped bibliotheek. Bijvoorbeeld met behulp van typeringen , kunt u de opdracht uit te voeren:

typings install dt~bootstrap --global --save

... en zonder enige extra code heb je toegang tot de verschillende Bootstrap plugins hebben.

Als ze niet de plug-in die u zoekt, overweeg dan bij te dragen uw eigen definitie.

antwoordde op 03/11/2016 om 23:04
bron van user StriplingWarrior

stemmen

0

Met behulp van een .d.tsverklaring bestand is waarschijnlijk beter, maar als alternatief kun je ook gebruik maken van de schrijfmachine's wereldwijde vergroting en verklaring samenvoegen om methoden toe te voegen aan jQuery interface. U kunt iets als het volgende in een van uw typoscript bestanden te plaatsen:

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

antwoordde op 15/02/2018 om 18:32
bron van user Jonathan Potter

Steven Ickman · Accepted Answer · 2012-10-04 08:10

Het probleem met jQuery plugins (en andere plug-in op basis van bibliotheken) is dat niet alleen heb je een library.d.ts bestand voor de basisbibliotheek nodig hebt, maar je hebt ook een plugin.d.ts bestand voor elke plugin nodig. En een of andere manier thes plugin.d.ts bestanden moeten naar de bibliotheek interfaces gedefinieerd in de library.d.ts bestanden uit te breiden. Gelukkig typoscript heeft een handige kleine functie waarmee u precies dat doen.

Met classeser momenteel slechts één cononical definitie van een klasse binnen een project kan zijn. Dus als je definiëren een class Foovan de leden die u op Foozijn alles wat je krijgt. Eventuele aanvullende definities van Foozal resulteren in een fout. Met interfaces, maar de leden zijn additief, dus als u definieert interface Barmet een set van leden die u kunt 'interface van Bar' een tweede keer om extra leden toe te voegen aan het definiëren interface. Dat is de sleutel tot het ondersteunen van jQuery plugins in een sterk getypeerde manier.

Dus om steun voor een specifieke jQuery plugin je gaat nodig hebben om een plugin.d.ts bestand voor de plug-in die u wilt gebruiken te maken toe te voegen. We maken gebruik van jQuery Templates in ons project dus hier is de jquery.tmpl.d.ts bestand we gemaakt om ondersteuning toe te voegen voor deze 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;
}

Het doorbreken van deze beneden het eerste wat we deden is om de methoden die krijgen toegevoegd aan het definiëren JQueryinterface. Deze laat je intellisense en typ het controleren tijdens het typen $('#foo').tmpl();Volgende we methoden toegevoegd aan de JQueryStaticinterface die verschijnen wanneer u typt $.tmpl();en ten slotte de jQuery Templates plugin definieert een aantal van haar eigen datastructuren dus we moesten interfaces voor deze structuren te definiëren.

Nu hebben we de extra interfaces definied we hoeven alleen maar om hen te verwijzen naar de consumptie van Ts bestanden. Om dat te doen we gewoon de verwijzingen toe te voegen onder aan de top van onze Ts file en dat is het. Voor dat bestand, zal typoscript zowel de basis jQuery methoden en de plugin methoden te zien. Als u meerdere plugins gebruiken maar zorg ervoor dat u al uw individuele plugin.d.ts bestanden refernce en je moet goed zijn.

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