Cómo usar jQuery con TypeScript

import jquery typescript

Question

estoy intentando

$(function(){ 
    alert(''Hello''); 
});

Muestra este error en Visual Studio: (TS) Cannot find name ''$''. . ¿Cómo puedo usar jQuery con TypeScript?

Answer 1

Aquí están mis pasos de configuración de TypeScript y jQuery.

Hace que el soporte de tipos de jQuery funcione mejor que la mayoría de los artículos en Internet . ( Yo creo. )

primero:

$(document).ready(function () {
    $(''btn'').click(function () {
       alert(''I am clicked !'')
    }
}

segundo (muy muy muy importante!!):

export var jQuery: any = window["jQuery"];

entonces, puedes disfrutarlo:

npm install --save-dev @types/query
and the use it with:
let $: JQueryStatic = (window as any)["jQuery"];

¡Es suave como la seda!

Answer 2

Creo que puede necesitar los tipos de letra mecanografiada para JQuery. Como dijiste que estás usando Visual Studio, puedes usar Nuget para obtenerlos.

https://www.nuget.org/packages/jquery.TypeScript.DefinitelyTyped/

El comando en Nuget Package Manager Console es

Install-Package jquery.TypeScript.DefinitelyTyped

Actualización: como se señaló en el comentario, este paquete no se ha actualizado desde 2016. Pero aún puede visitar su página de Github en https://github.com/DefinitelyTyped/DefinitelyTyped y descargar los tipos. Navegue por la carpeta de su biblioteca y luego descargue el archivo index.d.ts allí. Pop en cualquier lugar de su directorio de proyecto y VS debería usarlo de inmediato.

Answer 3

Debe declarar jquery / $ en su componente, si tsLint está activado para este tipo de comprobaciones de tipo.

Por ej.

declare var jquery: any;
declare var $: any;

Esto también funciona muy bien con otras bibliotecas de terceros, si tienen sus tipings instalados.

Answer 4

En mi caso tuve que hacer esto

npm install @types/jquery --save-dev // install jquery type as dev dependency so TS can compile properly
npm install jquery --save // save jquery as a dependency

Luego, en el archivo de script A.ts

import * as $ from "jquery";
... jquery code ...

Answer 5

Esto funciona para mi:

import jquery = require("jquery");



// this helps TypeScript to understand jQuery best !!!  otherwise It will confused .
const $: JQueryStatic = jquery;

Answer 6

Lo más probable es que necesite descargar e incluir el archivo de declaración TypeScript para jQuery, jquery.d.ts en su proyecto.

Opción 1: instale el paquete @types (recomendado para TS 2.0+)

En la misma carpeta que su archivo package.json , ejecute el siguiente comando:

npm install --save-dev @types/jquery

Luego, el compilador resolverá las definiciones de jquery automáticamente.

Opción 2: descargar manualmente (no recomendado)

Descárgalo here .

Opción 3: Uso de tipings (Pre TS 2.0)

Si usa typings , puede incluirlo de esta manera:

// 1. Install typings
npm install typings -g
// 2. Download jquery.d.ts (run this command in the root dir of your project)
typings install dt~jquery --global --save

Después de configurar el archivo de definición, importe el alias ( $ ) en el archivo TypeScript deseado para usarlo como lo haría normalmente.

import $ from "jquery";
// or
import $ = require("jquery");

Es posible que necesite compilar con --allowSyntheticDefaultImports —add "allowSyntheticDefaultImports": true en tsconfig.json .

Instalar también el paquete?

Si no tiene jquery instalado, probablemente quiera instalarlo como una dependencia a través de npm (pero este no es siempre el caso):

npm install --save jquery

Answer 7

PARA el código de Visual Studio

Lo que funciona para mí es asegurarme de que cargue la biblioteca JQuery estándar a través de una etiqueta <script> en index.html.

correr

npm install --save @types/jquery

Ahora las funciones JQuery $ están disponibles en todos los archivos .ts, sin necesidad de ninguna otra importación.

Answer 8

Para angular CLI V7

npm install jquery --save
npm install @types/jquery --save

Asegúrese de que jquery tenga una entrada en angular.json -> scripts

...
        "scripts": [
          "node_modules/jquery/dist/jquery.min.js"
        ]
...

Vaya a tsconfig.app.json y agregue una entrada en "tipos"

{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"types": ["jquery","bootstrap","signalr"]
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}

Answer 9

Si desea usar jquery en una aplicación web (por ejemplo, React) y jquery ya está cargado con <script src="jquery-3.3.1.js"...

En la página web puedes hacer:

npm install jquery --save
npm install @types/jquery --save-dev

entonces, no necesita cargar jquery por segunda vez (con npm install --save jquery ) pero tiene todas las ventajas de Typecript