À l'aide de jQuery plugin en caractères d'imprimerie

Question

Lors de l'utilisation de la machine dois-je faire pour importer un plugin.d.ts pour chaque js externe que j'utilise? En d'autres termes, dois-je créer un jQuery.d.ts avec toutes les interfaces?

Answer 1

Le problème avec les plugins jQuery (et d'autres plugin basé bibliothèques), c'est que vous n'avez pas seulement avez-vous besoin d'une bibliothèque.d.ts fichier de la bibliothèque de base vous avez également besoin d'un plugin.d.ts fichier pour chaque plugin. Et en quelque sorte de th de plugin.d.les fichiers ts nécessité d'étendre la bibliothèque interfaces définies dans la bibliothèque.d.les fichiers ts. Heureusement, la Machine a une chouette petite fonctionnalité qui vous permet de le faire.

Avec classes il y actuellement ne peut être qu'un seul cononical définition d'une classe au sein d'un projet. Donc, si vous définissez un class Foo membres vous mettre sur Foo sont tout ce que vous obtenez. Toutes les autres définitions de l' Foo entraînera une erreur. Avec interfaces, toutefois, les membres sont additif donc, si vous définissez interface Bar avec un ensemble de membres, vous pouvez définir l'interface de la Barre", un deuxième temps d'ajouter des membres à l' interface. C'est la clé pour favoriser les plugins jQuery, dans un typage fort moyen.

Afin d'ajouter le support pour un plugin jQuery vous allez avoir besoin de créer un plugin.d.fichier ts pour le plugin que vous souhaitez utiliser. Nous utilisons jQuery Templates dans notre projet, voici donc le jquery.tmpl.d.ts fichier que nous avons créé pour ajouter le support du 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;
}

Faire la première chose que nous avons fait est de définir les méthodes qui sont ajoutés à l' JQuery interface. Elles vous permettent d'obtenir de l'intellisense et la vérification de type lorsque vous tapez $('#foo').tmpl(); après nous avons ajouté des méthodes pour l' JQueryStatic interface qui s'affiche quand vous tapez $.tmpl(); Et enfin le jQuery Templates du plugin définit certains de ses propres structures de données nous avons donc besoin de définir des interfaces pour ces structures.

Maintenant que nous avons les interfaces supplémentaires défini nous avons juste besoin de faire référence à eux de le consommer .les fichiers ts. Pour ce faire nous avons il suffit d'ajouter les références ci-dessous à la tête de notre .ts fichier et c'est tout. Pour ce fichier, texte dactylographié verrez à la fois la base de méthodes jQuery et le plugin méthodes. Si vous utilisez plusieurs plugins assurez-vous de refernce tous de votre plugin.d.les fichiers ts, et vous devriez être bon.

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

Answer 2

L'enregistrement d'un .fichier ts n'a pas de déclencher automatiquement la compilation dans Visual Studio. Vous aurez besoin de construire/reconstruire pour déclencher la compilation.

Déclarer les fichiers (fichier.d.ts) permet le Tapuscrit compilateur obtenir mieux le type d'informations sur les bibliothèques JavaScript vous utilisez à partir de ce fichier. Vous pouvez avoir vos interfaces définie dans un fichier ou dans plusieurs fichiers; cela ne devrait faire aucune différence. Vous pouvez également "déclarer" les types/variables que vous utilisez à partir de bibliothèques externes en utilisant quelque chose comme:

declare var x: number;

ce qui fera dire au compilateur de traiter x comme un nombre.

Answer 3

J'ai été à la recherche pour un ré.ts pour jquery.masquesaisie (inputmask) et enfin de créer un simple un de mes propres. C'est à

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

ou vous pouvez voir le code ci-dessous.

Il ne couvre pas tous les cas pour jquery.masquesaisie (inputmask), mais sera probablement gérer la plupart.

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