Cách sử dụng jQuery với TypeScript

tôi đang cố gắng

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

Nó hiển thị lỗi này trong Visual Studio : (TS) Cannot find name '$'.. Làm cách nào để sử dụng jQuery với TypeScript?

Nhiều khả năng bạn cần tải xuống và bao gồm tệp khai báo TypeScript cho jQuery jquery.d.ts.

Tùy chọn 1: Cài đặt gói @types (Được khuyến nghị cho TS 2.0+)

Trong cùng thư mục với tệp pack.json của bạn , hãy chạy lệnh sau:

npm install --save-dev @types/jquery

Sau đó trình biên dịch sẽ tự động giải quyết các định nghĩa cho jquery.

Tùy chọn 2: Tải xuống thủ công (Không khuyến nghị)

Tải về ở đây .

Tùy chọn 3: Sử dụng kiểu chữ (Pre TS 2.0)

Nếu bạn đang sử dụng typings sau đó bạn có thể đưa nó theo cách này:

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

Sau khi thiết lập tệp định nghĩa, nhập bí danh ( $) trong tệp TypeScript mong muốn để sử dụng tệp như bình thường.

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

Bạn có thể cần phải biên dịch với --allowSyntheticDefaultImportssiêu dữ liệu "allowSyntheticDefaultImports": truetrong tsconfig.json .

Cũng cài đặt gói?

Nếu bạn chưa cài đặt jquery, có lẽ bạn muốn cài đặt nó dưới dạng phụ thuộc qua npm (nhưng điều này không phải lúc nào cũng đúng):

npm install --save jquery

Trong trường hợp của tôi, tôi đã phải làm điều này

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

Sau đó trong tập tin kịch bản A.ts

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

CHO mã Visual Studio

Điều làm việc với tôi là đảm bảo tôi thực hiện tải thư viện JQuery tiêu chuẩn thông qua thẻ <script> trong index.html.

Chạy

npm install --save @types/jquery

Bây giờ các hàm JQuery $ đã có sẵn trong tất cả các tệp .ts, không cần bất kỳ nhập khác.

Tôi tin rằng bạn có thể cần các kiểu đánh máy cho JQuery. Vì bạn nói bạn đang sử dụng Visual Studio, bạn có thể sử dụng Nuget để lấy chúng.

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

Lệnh trong Bảng điều khiển quản lý gói Nuget là

Install-Package jquery.TypeScript.DefinitelyTyped

Cập nhật: Như đã lưu ý trong nhận xét, gói này chưa được cập nhật từ năm 2016. Nhưng bạn vẫn có thể truy cập trang Github của họ tại https://github.com/DefiniteTyped/DefiniteTyped và tải xuống các loại. Điều hướng thư mục cho thư viện của bạn và sau đó tải xuống index.d.tstệp ở đó. Pop nó bất cứ nơi nào trong thư mục dự án của bạn và VS nên sử dụng nó ngay lập tức.

Đối với CLI góc 7

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

Đảm bảo jquery có một mục trong angular.json -> script

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

Truy cập tsconfig.app.json và thêm một mục trong "loại"

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

CẬP NHẬT 2019:

Trả lời của David , là chính xác hơn.

Bản in hỗ trợ các thư viện nhà cung cấp bên thứ 3, không sử dụng Bản in để phát triển thư viện, sử dụng DefiniteTyped Repo .

Bạn cần phải khai báo jquery/ $trong Thành phần của mình, Nếu tsLint được Bật cho các loại Kiểm tra Loại này.

Ví dụ

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

Nếu bạn muốn sử dụng jquery trong một ứng dụng web (ví dụ React) và jquery đã được tải với <script src="jquery-3.3.1.js"...

Trên trang web bạn có thể làm:

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

vì vậy, bạn không cần phải tải jquery lần thứ hai (với npm install --save jquery) nhưng có tất cả các lợi thế của Bản mô tả

Đây là các bước cấu hình TypeScript & jQuery của tôi.

Nó làm cho các kiểu của jQuery hỗ trợ để hoạt động tốt hơn hầu hết các bài viết trên internet . ( Tôi tin. )

Đầu tiên:

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

thứ hai (rất rất rất rất quan trọng!!):

import jquery = require("jquery");



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

sau đó, bạn có thể thưởng thức nó:

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

Nó mượt mà !!!

Điều này làm việc cho tôi bây giờ và hôm nay tại Angular phiên bản 9

1. Cài đặt qua npm này: npm i @ type / jquery chỉ cần thêm --save để thiết lập toàn cầu.
2. Truy cập tsconfig.app.json và thêm vào mảng "type" jquery.
3. ng phục vụ và thực hiện.

Điều này làm việc cho tôi:

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