Cómo usar jQuery con TypeScript

estoy intentando

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

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

Lo más probable es que necesite descargar e incluir el archivo de declaración TypeScript para jQuery jquery.d.tsen 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 aquí .

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

Si usa tipings , 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");

Puede que necesite compilar con --allowSyntheticDefaultImports—add "allowSyntheticDefaultImports": trueen tsconfig.json .

Instalar también el paquete?

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

npm install --save jquery

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 ...

PARA el código de Visual Studio

Lo que funciona para mí es asegurarme de hacer la carga estándar de la biblioteca JQuery a través de una etiqueta <script> en el 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.

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 index.d.tsarchivo allí. Pop en cualquier parte de su directorio de proyecto y VS debería usarlo de inmediato.

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"
    ]
}

ACTUALIZACIÓN 2019:

La respuesta de David es más precisa.

TypeScript admite bibliotecas de proveedores de terceros, que no utilizan Typecript para el desarrollo de bibliotecas, utilizando DefinitelyTyped Repo .

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;

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 --save-dev @types/query
and the use it with:
let $: JQueryStatic = (window as any)["jQuery"];

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

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:

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

segundo (muy muy muy importante!!!):

import jquery = require("jquery");



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

entonces, puedes disfrutarlo:

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

¡Es suave como la seda!

Esto funciona para mí ahora y hoy en Angular versión 9

1. Instale a través de npm this: npm i @ types / jquery simplemente agregue --save para configurarlo globalmente.
2. Vaya a tsconfig.app.json y agregue la matriz "tipos" jquery.
3. ng servir y listo.

Esto funciona para mi:

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