Cara menggunakan jQuery dengan TypeScript

aku sedang mencoba

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

Its menunjukkan kesalahan ini dalam Visual Studio: (TS) Cannot find name '$'.. Bagaimana saya bisa menggunakan jQuery dengan TypeScript?

Kemungkinan besar Anda perlu mengunduh dan memasukkan file deklarasi TypeScript untuk jQuery— jquery.d.ts—di proyek Anda.

Opsi 1: Instal paket @types (Disarankan untuk TS 2.0+)

Dalam folder yang sama dengan file package.json Anda , jalankan perintah berikut:

npm install --save-dev @types/jquery

Kemudian kompiler akan menyelesaikan definisi untuk jquery secara otomatis.

Opsi 2: Unduh Secara Manual (Tidak Disarankan)

Unduh di sini .

Opsi 3: Menggunakan Typing (Pre TS 2.0)

Jika Anda menggunakan pengetikan maka Anda bisa memasukkannya dengan cara ini:

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

Setelah mengatur file definisi, impor alias ( $) di file TypeScript yang diinginkan untuk menggunakannya seperti biasa.

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

Anda mungkin perlu untuk mengkompilasi dengan --allowSyntheticDefaultImports-Tambahkan "allowSyntheticDefaultImports": truedi tsconfig.json .

Juga Instal Paket?

Jika Anda tidak menginstal jquery, Anda mungkin ingin menginstalnya sebagai dependensi melalui npm (tetapi ini tidak selalu terjadi):

npm install --save jquery

Dalam kasus saya, saya harus melakukan ini

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

Kemudian di file skrip A.ts

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

UNTUK Kode Visual Studio

Apa yang berhasil bagi saya adalah memastikan saya melakukan pemuatan pustaka JQuery standar melalui <script> tag di index.html.

Lari

npm install --save @types/jquery

Sekarang fungsi JQuery $ tersedia di semua file .ts, tidak perlu impor lainnya.

Saya yakin Anda mungkin perlu mengetikkan Typefrip untuk JQuery. Karena Anda mengatakan Anda menggunakan Visual Studio, Anda bisa menggunakan Nuget untuk mendapatkannya.

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

Perintah dalam Konsol Manajer Paket Nuget adalah

Install-Package jquery.TypeScript.DefinitelyTyped

Pembaruan: Seperti yang tercantum dalam komentar, paket ini belum diperbarui sejak 2016. Tetapi Anda masih dapat mengunjungi halaman Github mereka di https://github.com/DefinitelyTyped/DefinitelyTyped dan unduh jenisnya. Arahkan folder untuk perpustakaan Anda dan kemudian unduh index.d.tsfile di sana. Pop itu di mana saja di direktori proyek Anda dan VS harus segera menggunakannya.

Untuk Angular CLI V7

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

Pastikan jquery memiliki entri dalam skrip angular.json ->

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

Buka tsconfig.app.json dan tambahkan entri di "types"

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

PEMBARUAN 2019:

Jawab oleh David , lebih akurat.

Typescript mendukung pustaka vendor pihak ketiga, yang tidak menggunakan Typcript untuk pengembangan pustaka, menggunakan DefinitelyTyped Repo .

Anda perlu mendeklarasikan jquery/ $dalam Komponen Anda, Jika tsLint Aktif untuk jenis Pemeriksaan Jenis ini.

Untuk eg.

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

Jika Anda ingin menggunakan jquery dalam aplikasi web (mis. Bereaksi) dan jquery sudah dimuat <script src="jquery-3.3.1.js"...

Di halaman web yang dapat Anda lakukan:

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

jadi, Anda tidak perlu memuat jquery untuk kedua kalinya (dengan npm install --save jquery) tetapi memiliki semua kelebihan dari Typecript

Inilah langkah-langkah konfigurasi TypeScript & jQuery saya.

Itu membuat dukungan tipe jQuery untuk bekerja lebih baik daripada kebanyakan artikel di internet . ( Aku percaya. )

pertama:

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

kedua (sangat sangat sangat penting!!!):

import jquery = require("jquery");



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

lalu, Anda Bisa Menikmatinya:

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

Halus seperti sutra !!!

Ini berfungsi untuk saya sekarang dan hari ini di versi Angular 9

1. Instal melalui npm ini: npm i @ types / jquery cukup tambahkan --simpan ke pengaturan secara global.
2. Pergi ke tsconfig.app.json dan tambahkan dalam jquery "types" array.
3. ng servis dan selesai.

Ini bekerja untuk saya:

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