¿Cómo puedo detener los errores de sintaxis de "la propiedad no existe en el tipo JQuery" cuando utilizo TypeScript?

80

Solo estoy usando una línea de jQuery en mi aplicación:

$("div.printArea").printArea();

Pero esto me está dando un error de TypeScript:

¿La propiedad 'printArea' no existe en el tipo JQuery?

¿Alguien puede decirme cómo puedo evitar que aparezca este error?

jquery typescript

— Alan2
fuente

188

Puede convertirlo en <any>jquery o extenderlo para agregar su propio método.

 (<any>$("div.printArea")).printArea();

// O agregue sus propios métodos personalizados (suponiendo que usted mismo lo agregue como parte del complemento personalizado)

interface JQuery {
    printArea():void;
}

— PSL
fuente

dándome:Error:(44, 23) TS2339: Property 'printArea' does not exist on type 'ElementFinder'.

— user47376

Si intenta el interface JQuerycamino en un módulo externo y define un parámetro de función como un tipo JQuery e intenta llamarlo desde otro archivo, TypeScript se quejará de que hay dos tipos llamados JQuery que no están relacionados.

— Sam Rueby

Declarar la interfaz parece funcionar muy bien. También es mucho más limpio que enviar contenido a <cualquier> en todas partes

— decodificado

Esto no funcionó para mí, pero finalmente me encontré con stackoverflow.com/questions/30960386/… y me di cuenta de que necesitaba declare global { ... }la declaración de interfaz.

— James Hopkin

44

Creo que esta es la solución más legible:

($("div.printArea") as any).printArea();

— Eldamir
fuente

12

Puedes lanzarlo a

(<any>$('.selector') ).function();

Ej: selector de fecha inicializar usando jquery

(<any>$('.datepicker') ).datepicker();

— vishnu
fuente

3

Para su ejemplo, agregaría esto:

interface JQuery{
    printArea():void;
}

Editar: oops, basarat es correcto a continuación. No estoy seguro de por qué pensé que se estaba compilando, pero actualicé esta respuesta.

— AlexB
fuente

No Está envolviendo un objeto con $. Ya no es estático $

— basarat

Hmm, ¿estás seguro? Lo probé en un proyecto y funcionó.

— AlexB

Sip. Su caso $.inviewport(el)Caso de $('selector').printArea

— operaciones

Lo siento, no quiero quejarme, pero mi código funciona para mí. La pregunta parece ser acerca de cómo compilar el código, así que si mi código se compila, ¿cuál es el problema? Tenga en cuenta que mi segundo ejemplo con printArea () también funciona.

— AlexB

$('selector').printAreacompila? No lo creo. $.printAreacompilará sin embargo. Usted ha sido muy amable por lo que ninguna ofensa ejecutados o dispuestos :)

— Basarat

2

Dado que printArea es un complemento de jQuery, no está incluido en jquery.d.ts.

Necesita crear un archivo de definición jquery.printArea.ts.

Si crea un archivo de definición completo para el complemento, es posible que desee enviarlo a DefinitelyTyped .

— Albin Sunnanbo
fuente

Y asegúrese de que su tsconfig.json también esté configurado correctamente. Si tiene una configuración de "tipos", solo se reconocerán los tipos enumerados. De lo contrario, reconocerá todo en node_modules / @ types

— Dan Cancro

2

También puedes escribirlo así:

let elem: any;
elem = $("div.printArea");
elem.printArea();

— iqqmuT
fuente

2

También puede usar la sintaxis de ignorar en lugar de usar (o mejor la notación 'como cualquier'):

// @ts-ignore
$("div.printArea").printArea();

— Guntram
fuente