วิธีใช้ jQuery กับ TypeScript

ฉันกำลังพยายาม

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

มันแสดงให้เห็นข้อผิดพลาดนี้ใน Visual (TS) Cannot find name '$'.Studio: ฉันจะใช้ jQuery กับ TypeScript ได้อย่างไร

เป็นไปได้มากว่าคุณต้องดาวน์โหลดและรวมไฟล์ประกาศ TypeScript สำหรับ jQuery— jquery.d.tsในโครงการของคุณ

ตัวเลือกที่ 1: ติดตั้งแพ็คเกจ @types (แนะนำสำหรับ TS 2.0+)

ในโฟลเดอร์เดียวกับไฟล์package.jsonของคุณให้เรียกใช้คำสั่งต่อไปนี้:

npm install --save-dev @types/jquery

จากนั้นคอมไพเลอร์จะแก้ไขคำจำกัดความของ jquery โดยอัตโนมัติ

ตัวเลือกที่ 2: ดาวน์โหลดด้วยตนเอง (ไม่แนะนำ)

ดาวน์โหลดได้ที่นี่

ตัวเลือก 3: การใช้ Typings (พื้นฐาน TS 2.0)

หากคุณใช้งานพิมพ์คุณสามารถรวมมันได้ด้วยวิธีนี้:

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

หลังจากตั้งค่าไฟล์คำนิยามให้อิมพอร์ต alias ( $) ในไฟล์ TypeScript ที่ต้องการเพื่อใช้งานตามปกติ

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

คุณอาจจำเป็นต้องรวบรวมกับ--allowSyntheticDefaultImportsเพิ่ม"allowSyntheticDefaultImports": trueในtsconfig.json

ติดตั้งแพคเกจด้วยหรือไม่

หากคุณไม่ได้ติดตั้ง jquery คุณอาจต้องการติดตั้งเป็นการพึ่งพาผ่าน npm (แต่นี่อาจไม่ใช่ทุกกรณี):

npm install --save jquery

ในกรณีของฉันฉันต้องทำเช่นนี้

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

จากนั้นในไฟล์สคริปต์ A.ts

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

สำหรับVisual Studio รหัส

สิ่งที่ดีสำหรับฉันคือการทำให้แน่ใจว่าฉันทำไลบรารี JQuery มาตรฐานโหลดผ่านแท็ก<script>ใน index.html

วิ่ง

npm install --save @types/jquery

ตอนนี้ฟังก์ชั่น JQuery $ นั้นมีอยู่ในไฟล์. ts ทั้งหมดโดยไม่จำเป็นต้องมีการนำเข้าอื่น ๆ

ฉันเชื่อว่าคุณอาจต้องใช้ตัวพิมพ์ของ typescript สำหรับ JQuery เมื่อคุณพูดว่าคุณกำลังใช้ Visual Studio คุณสามารถใช้ Nuget เพื่อรับมันได้

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

คำสั่งใน Nuget Package Manager Console คือ

Install-Package jquery.TypeScript.DefinitelyTyped

อัปเดต:ตามที่ระบุไว้ในความคิดเห็นแพคเกจนี้ยังไม่ได้รับการอัปเดตตั้งแต่ปี 2016 แต่คุณยังสามารถเยี่ยมชมหน้า Github ได้ที่https://github.com/DefinitelyTyped/DefinitelyTypedและดาวน์โหลดประเภท นำทางโฟลเดอร์สำหรับไลบรารีของคุณแล้วดาวน์โหลดindex.d.tsไฟล์ที่นั่น ปรากฏในที่ใดก็ได้ในไดเรกทอรีโครงการของคุณและ VS ควรใช้ทันที

สำหรับเชิงมุม CLI V7

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

ตรวจสอบให้แน่ใจว่า jquery มีรายการใน angular.json -> สคริปต์

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

ไปที่ tsconfig.app.json และเพิ่มรายการใน "ประเภท"

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

อัพเดท 2019:

คำตอบของเดวิดนั้นแม่นยำกว่า

typescript สนับสนุนห้องสมุดผู้จำหน่ายของบุคคลที่ 3 ซึ่งไม่ได้ใช้ typescript สำหรับการพัฒนาห้องสมุดใช้DefinitelyTyped Repo

คุณจำเป็นต้องประกาศjquery/ $ในส่วนประกอบของคุณหากเปิดใช้งาน tsLint สำหรับการตรวจสอบประเภทประเภทนี้

สำหรับเช่น

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

หากคุณต้องการใช้ jQuery ในเว็บแอปพลิเคชั่น (เช่น React) และ jquery นั้นโหลดไปแล้ว <script src="jquery-3.3.1.js"...

บนหน้าเว็บคุณสามารถทำได้:

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

ดังนั้นคุณไม่จำเป็นต้องโหลด jQuery เป็นครั้งที่สอง (พร้อมnpm install --save jquery) แต่มีข้อดีทั้งหมดของ typescript

นี่คือขั้นตอนการกำหนดค่าของฉัน TypeScript & jQuery

ทำให้ประเภทของ jQuery สนับสนุนให้ทำงานได้ดีกว่าบทความส่วนใหญ่ในอินเทอร์เน็ตทำงานที่ดีกว่าบทความมากที่สุดในอินเทอร์เน็ต( ฉันเชื่อ. )

ครั้งแรก:

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

วินาที (สำคัญมากมาก!!!):

import jquery = require("jquery");



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

จากนั้นคุณสามารถเพลิดเพลินกับมัน:

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

มันเนียนเรียบ !!!

งานนี้สำหรับฉันตอนนี้และวันนี้ที่ Angular เวอร์ชัน 9

1. ติดตั้งผ่าน npm สิ่งนี้: npm i @ types / jquery เพียงเพิ่ม --save เพื่อตั้งค่าทั่วโลก
2. ไปที่ tsconfig.app.json และเพิ่ม jquery ในอาร์เรย์ "ประเภท"
3. ทำหน้าที่และทำ

สิ่งนี้ใช้ได้กับฉัน:

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