Mit jQuery Plugin in Typoskript

Question

Mit jQuery Plugin in Typoskript

stimmen

66

Wenn Typoskript mit Benötige ich ein plugin.d.ts für alle externen js importieren müssen, die ich verwenden? Mit anderen Worten, ich einen jQuery.d.ts mit allen Schnittstellen erstellen müssen?

typescript

Veröffentlicht am 04/10/2012 um 03:29
quelle vom benutzer MuriloKunze

In anderen Sprachen...

5 antworten

stimmen

4

eine .ts-Datei speichern löst nicht automatisch Kompilierung in Visual Studio. Sie müssen bauen / rebuild die Erstellung auszulösen.

Deklarieren Dateien (file.d.ts) lassen der Typoskript Compiler bessere Art Informationen über die JavaScript-Bibliotheken erhalten Sie aus dieser Datei verwenden. Sie können Ihre Schnittstellen definiert alle in einer Datei oder in mehrere Dateien haben; dies sollte keinen Unterschied machen. Sie können „erklären“ die Typen / Variablen, die Sie verwenden, werden von externen Bibliotheken auch etwas mit wie:

declare var x: number;

die den Compiler sagen x als Zahl zu behandeln.

Beantwortet am 04/10/2012 um 04:24
quelle vom benutzer mohamed hegazy

stimmen

3

Ich habe seit einem d.ts für jquery.inputmask suchen und schließlich einen einfachen einen meiner eigenen erstellt. Es ist bei

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

oder Sie können den Code unten sehen.

Es wird nicht in allen Fällen für jquery.inputmask decken, wird aber wahrscheinlich die meisten handhaben.

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

Beantwortet am 05/09/2014 um 20:50
quelle vom benutzer Jpirok

stimmen

2

Vor Erstellung Ihre eigene .d.tsDatei für das Plugin, sollten Sie überprüfen , um zu sehen , ob es bereits als DefinitelyTyped Bibliothek. Zum Beispiel mit Typisierungen , können Sie den Befehl ausführen:

typings install dt~bootstrap --global --save

... und ohne zusätzlichen Code haben Sie Zugriff auf die verschiedenen Bootstrap-Plugins haben.

Wenn sie Sie suchen sich das Plugin nicht haben, sollten Sie Ihre eigene Definition beitragen.

Beantwortet am 03/11/2016 um 23:04
quelle vom benutzer StriplingWarrior

stimmen

0

Unter Verwendung einer .d.tsDeklarationsdatei ist wahrscheinlich besser, aber als Alternative können Sie auch Typoskript des verwenden die globale Verbesserung und Erklärung Verschmelzung hinzuzufügen Methoden jQuerys Schnittstelle. Sie können so etwas wie die folgenden in einem Ihrer Typoskript Dateien platzieren:

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

Beantwortet am 15/02/2018 um 18:32
quelle vom benutzer Jonathan Potter

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

Das Problem mit jQuery-Plugins (und anderen Plug-basierten Bibliotheken) ist, dass nicht nur müssen Sie eine library.d.ts-Datei für die Basisbibliothek, aber Sie müssen auch eine plugin.d.ts-Datei für jedes Plugin. Und irgendwie thes plugin.d.ts Dateien benötigen, um die Bibliothek Schnittstellen in den library.d.ts Dateien definiert zu verlängern. Glücklicherweise hat Typoskript eine nette kleine Funktion, die Sie genau das tun können.

Mit classesdort derzeit nur innerhalb eines Projektes eine einzige cononical Definition einer Klasse sein. Wenn Sie also ein definieren class FooSie die Mitglieder auf setzen Foosind alles , was Sie bekommen. Alle zusätzlichen Definitionen Foowerden in einem Fehler. Mit interfacesjedoch sind die Mitglieder Additiv also , wenn Sie definieren interface Barmit einer Reihe von Mitgliedern können Sie ‚Schnittstelle Bar‘ ein zweites Mal definieren , um zusätzliche Mitglieder zu dem hinzufügen interface. Das ist der Schlüssel zu unterstützen jQuery Plugins in einer stark typisierten Weise.

So , um Unterstützung für ein bestimmtes jQuery - Plugin Sie gehen zu müssen eine plugin.d.ts Datei für das Plugin die Sie verwenden möchten , erstellen. Wir verwenden jQuery Vorlagen in unser Projekt hier vor sich , so dass die jquery.tmpl.d.ts Datei wir Unterstützung für das Plugin hinzuzufügen erstellt:

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

Brechen diese nach unten das erste , was wir getan haben , ist die Methoden zu definieren , die auf die noch hinzukommen JQuerySchnittstelle. Diese können Sie Intellisense erhalten und Überprüfung eingeben , wenn Sie geben $('#foo').tmpl();Weiter haben wir Methoden , um die JQueryStaticSchnittstelle , die auftauchen , wenn Sie eingeben $.tmpl();Und schließlich die jQuery Vorlagen Plugin definiert einige seiner eigenen Datenstrukturen so brauchten wir Schnittstellen für solche Strukturen zu definieren.

Nun, da haben wir die zusätzlichen Schnittstellen definiertem wir müssen nur sie von den Verbrauchern .ts-Dateien verweisen. Dazu müssen wir die Referenzen fügen Sie einfach unten an der Spitze unserer .ts-Datei und das ist es. Für diese Datei wird sehen Typoskript sowohl die Basis jQuery Methoden und die Plugin-Methoden. Wenn Sie mehrere Plugins verwenden nur sicherstellen, dass Sie alle Ihre individuellen plugin.d.ts Dateien refernce und Sie sollten gut sein.

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