¿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

Respuestas:

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