Usando jQuery plug-in a máquina de escribir

Question

Usando jQuery plug-in a máquina de escribir

votos

66

Cuando se utiliza texto mecanografiado hacer yo necesito para importar un plugin.d.ts por cada js externos que utilizo? En otras palabras, ¿necesito para crear un jQuery.d.ts con todas las interfaces?

typescript

Publicado el 04/10/2012 a las 03:29
fuente por usuario MuriloKunze

En otros idiomas...

5 respuestas

votos

4

Guardar un archivo ts no se activa automáticamente la compilación en Visual Studio. Usted tendrá que construir / reconstruir para activar la compilación.

Declarar archivos (file.d.ts) permite el compilador mecanografiado obtener una mejor información sobre el tipo de las bibliotecas de JavaScript que esté utilizando en ese archivo. Usted puede tener sus interfaces definidas todo en un solo archivo, o en múltiples archivos; esto no debería haber ninguna diferencia. También puede "declarar" los tipos / variables que se está utilizando de bibliotecas externas usando algo como:

declare var x: number;

que le dirá al compilador para tratar x como un número.

Respondida el 04/10/2012 a las 04:24
fuente por usuario mohamed hegazy

votos

3

He estado buscando un d.ts para jquery.inputmask y finalmente creado un sencillo de mi propia. Está en

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

o se puede ver el código de abajo.

No va a cubrir todos los casos para jquery.inputmask, pero probablemente va a manejar la mayoría.

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

Respondida el 05/09/2014 a las 20:50
fuente por usuario Jpirok

votos

2

Antes de crear su propio .d.tsarchivo para el plugin, usted debe comprobar para ver si ya es como un DefinitelyTyped biblioteca. Por ejemplo, el uso de tipificaciones , puede ejecutar el comando:

typings install dt~bootstrap --global --save

... y sin ningún código extra que tendrá acceso a los diversos plugins Bootstrap.

Si no tienen el plugin que está buscando, considere contribuir a su propia definición.

Respondida el 03/11/2016 a las 20:04
fuente por usuario StriplingWarrior

votos

0

El uso de un .d.tsexpediente de declaración es probablemente mejor, pero como alternativa también se puede utilizar de mecanografiado aumento y la declaración global fusión de añadir métodos a la interfaz de jQuery. Puede colocar algo como lo siguiente en cualquiera de sus archivos de texto mecanografiado:

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

Respondida el 15/02/2018 a las 15:32
fuente por usuario Jonathan Potter

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

El problema con los plugins jQuery (y otras bibliotecas plugin) es que no sólo es necesario un archivo library.d.ts para la biblioteca de base, pero también necesita un archivo plugin.d.ts para cada plugin. Y de alguna manera Ts plugin.d.ts archivos necesitan extender las interfaces de biblioteca definidos en los archivos de library.d.ts. Afortunadamente, mecanografiado tiene un poco ingeniosa característica que le permite hacer precisamente eso.

Con classesexiste actualmente sólo puede ser una definición única cononical de una clase dentro de un proyecto. Así que si se define una class Foolos miembros que puso en Fooson todo lo que obtiene. Cualquier definiciones adicionales de Fooresultarán en un error. Con interfaces, sin embargo, los miembros son aditivos por lo que si se define interface Barcon un conjunto de miembros puede definir 'interfaz Bar' por segunda vez para agregar miembros adicionales al interface. Esa es la clave para apoyar plugins jQuery de una manera inflexible.

Así que para añadir soporte para un plugin de jQuery dado que vas a necesitar para crear un archivo plugin.d.ts para el plugin que desea utilizar. Utilizamos plantillas jQuery en nuestro proyecto así que aquí está el archivo de jquery.tmpl.d.ts creamos para añadir soporte para ese 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;
}

Para romper este abajo del primero que hicimos es definir los métodos que se añaden a la JQueryinterfaz. Estos le permiten obtener IntelliSense y la comprobación de tipos cuando se escribe $('#foo').tmpl();A continuación añadimos los métodos de la JQueryStaticinterfaz que aparece cuando se escribe $.tmpl();Y, finalmente, el jQuery Plugin define algunas de sus propias estructuras de datos así que necesitábamos para definir interfaces para dichas estructuras.

Ahora que tenemos las interfaces adicionales definied sólo tenemos que hacer referencia a ellos a partir de los archivos .ts que consumen. Para hacer esto simplemente añadimos las referencias a continuación a la parte superior de nuestro archivo ts y eso es todo. Para ese archivo, mecanografiado verá tanto los métodos de jQuery base y los métodos del plugin. Si utiliza varios plugins sólo asegúrese de refernce todos sus archivos plugin.d.ts individuales y que debe estar bien.

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