Come usare jQuery con TypeScript

sto provando

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

La sua che mostra questo errore in Visual Studio: (TS) Cannot find name '$'.. Come posso usare jQuery con TypeScript?

Molto probabilmente è necessario scaricare e includere il file di dichiarazione TypeScript per jQuery jquery.d.ts— nel progetto.

Opzione 1: installa il pacchetto @types (consigliato per TS 2.0+)

Nella stessa cartella del file package.json , eseguire il comando seguente:

npm install --save-dev @types/jquery

Quindi il compilatore risolverà automaticamente le definizioni per jquery.

Opzione 2: download manuale (non consigliato)

Scaricalo qui .

Opzione 3: utilizzo delle digitazioni (Pre TS 2.0)

Se stai utilizzando le digitazioni , puoi includerlo in questo modo:

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

Dopo aver impostato il file di definizione, importare l'alias ( $) nel file TypeScript desiderato per usarlo normalmente.

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

Potrebbe essere necessario compilare con --allowSyntheticDefaultImports-add "allowSyntheticDefaultImports": truein tsconfig.json .

Installa anche il pacchetto?

Se non hai installato jquery, probabilmente vorrai installarlo come dipendenza tramite npm (ma non è sempre così):

npm install --save jquery

Nel mio caso ho dovuto farlo

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

Quindi nel file di script A.ts

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

PER il codice di Visual Studio

Ciò che funziona per me è assicurarmi di eseguire il caricamento della libreria JQuery standard tramite uno <script> tag in index.html.

Correre

npm install --save @types/jquery

Ora le funzioni JQuery $ sono disponibili in tutti i file .ts, senza bisogno di altre importazioni.

Credo che potresti aver bisogno delle tipizzazioni Typescript per JQuery. Dal momento che hai detto che stai usando Visual Studio, potresti usare Nuget per ottenerli.

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

Il comando nella console di Nuget Package Manager è

Install-Package jquery.TypeScript.DefinitelyTyped

Aggiornamento: come indicato nel commento, questo pacchetto non è stato aggiornato dal 2016. Ma puoi ancora visitare la loro pagina Github su https://github.com/DefinitelyTyped/DefinitelyTyped e scaricare i tipi. Passare alla cartella per la libreria e quindi scaricare il index.d.tsfile lì. Inseriscilo ovunque nella directory del progetto e VS dovrebbe usarlo immediatamente.

Per Angular CLI V7

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

Assicurati che jquery abbia una voce in angular.json -> script

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

Vai a tsconfig.app.json e aggiungi una voce in "tipi"

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

AGGIORNAMENTO 2019:

Risposta di David , è più preciso.

Typescript supporta librerie di fornitori di terze parti, che non utilizzano Typescript per lo sviluppo di librerie, utilizzando DefinitelyTyped Repo .

È necessario dichiarare jquery/ $nel componente, se tsLint è attivo per questi tipi di controlli del tipo.

Per es.

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

Se si desidera utilizzare jquery in un'applicazione Web (ad esempio React) e jquery è già caricato <script src="jquery-3.3.1.js"...

Sulla pagina web puoi fare:

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

quindi, non è necessario caricare jquery una seconda volta (con npm install --save jquery) ma avere tutti i vantaggi di Typescript

Ecco i miei passi di configurazione di TypeScript e jQuery.

Rende i tipi di jQuery supportati per funzionare meglio della maggior parte degli articoli su Internet . ( Credo. )

primo:

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

secondo (molto, molto importante!!!):

import jquery = require("jquery");



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

allora, puoi godertelo:

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

È liscio come la seta !!!

Questo lavoro per me ora e oggi in Angular versione 9

1. Installa via npm questo: npm i @ types / jquery basta aggiungere --save per l'installazione a livello globale.
2. Vai a tsconfig.app.json e aggiungi l'array "tipi" jquery.
3. servire e fatto.

Questo funziona per me:

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