Jak używać jQuery z TypeScript

próbuję

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

Jego pokazując ten błąd w Visual Studio: (TS) Cannot find name '$'.. Jak mogę używać jQuery z TypeScript?

Najprawdopodobniej musisz pobrać i dołączyć plik deklaracji TypeScript dla jQuery— jquery.d.ts— do swojego projektu.

Opcja 1: Zainstaluj pakiet @types (zalecany dla TS 2.0+)

W tym samym folderze, w którym znajduje się plik package.json , uruchom następujące polecenie:

npm install --save-dev @types/jquery

Następnie kompilator automatycznie rozwiąże definicje dla jquery.

Opcja 2: Pobierz ręcznie (niezalecane)

Pobierz go tutaj .

Opcja 3: używanie czcionek (przed TS 2.0)

Jeśli używasz pisania , możesz to uwzględnić w ten sposób:

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

Po skonfigurowaniu pliku definicji zaimportuj alias ( $) do żądanego pliku TypeScript, aby używać go w normalny sposób.

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

Być może trzeba kompilować z --allowSyntheticDefaultImports-add "allowSyntheticDefaultImports": truew tsconfig.json .

Zainstalować także pakiet?

Jeśli nie masz zainstalowanego jquery, prawdopodobnie chcesz zainstalować go jako zależność przez npm (ale nie zawsze tak jest):

npm install --save jquery

W moim przypadku musiałem to zrobić

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

Następnie w pliku skryptu A.ts

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

DLA Visual Studio Code

To, co działa dla mnie, to upewnienie się, że ładuję standardową bibliotekę JQuery za pomocą <script> tagu w index.html.

Biegać

npm install --save @types/jquery

Teraz funkcje JQuery $ są dostępne we wszystkich plikach .ts, nie ma potrzeby żadnego innego importu.

Uważam, że możesz potrzebować maszynopisu dla JQuery. Ponieważ powiedziałeś, że używasz programu Visual Studio, możesz użyć Nuget, aby je uzyskać.

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

Polecenie w konsoli Menedżera pakietów Nuget to

Install-Package jquery.TypeScript.DefinitelyTyped

Aktualizacja: Jak zauważono w komentarzu, ten pakiet nie był aktualizowany od 2016 r. Ale nadal możesz odwiedzić ich stronę Github pod adresem https://github.com/DefinitelyTyped/DefinitelyTyped i pobrać typy. Przejdź do folderu swojej biblioteki, a następnie pobierz index.d.tstam plik. Umieść go w dowolnym miejscu katalogu projektu, a VS powinien od razu go użyć.

Dla Angular CLI V7

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

Upewnij się, że jquery ma wpis w angular.json -> scripts

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

Przejdź do tsconfig.app.json i dodaj wpis w „Typach”

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

UPDATE 2019:

Odpowiedź Davida jest dokładniejsza.

Typescript obsługuje biblioteki innych dostawców, które nie używają Typescript do tworzenia bibliotek, używając DefinitelyTyped Repo .

Musisz zadeklarować jquery/ $w swoim komponencie, jeśli tsLint jest włączony dla tych typów sprawdzania typu.

Np.

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

Jeśli chcesz używać jquery w aplikacji internetowej (np. React), a jquery jest już załadowany <script src="jquery-3.3.1.js"...

Na stronie internetowej możesz:

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

więc nie musisz ładować jquery po raz drugi (za pomocą npm install --save jquery), ale masz wszystkie zalety Typescript

Oto moje kroki konfiguracji TypeScript i jQuery.

To sprawia, że ​​obsługa typów jQuery działa lepiej niż większość artykułów w Internecie . ( Wierzę. )

pierwszy:

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

po drugie (bardzo, bardzo ważne!!!):

import jquery = require("jquery");



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

wtedy możesz się tym cieszyć:

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

Jest jedwabiście gładka !!!

To działa dla mnie teraz i dziś w wersji Angular 9

1. Zainstaluj przez npm to: npm i @ types / jquery po prostu dodaj --save, aby skonfigurować globalnie.
2. Przejdź do tsconfig.app.json i dodaj jquery do tablicy „types”.
3. ng służyć i gotowe.

To działa dla mnie:

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