टाइपस्क्रिप्ट के साथ jQuery का उपयोग कैसे करें

Question

मैं कोशिश कर रहा हूँ

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

यह दृश्य स्टूडियो में इस त्रुटि को दिखा रहा है (TS) Cannot find name '$'.:। मैं टाइपस्क्रिप्ट के साथ jQuery का उपयोग कैसे कर सकता हूं?

Comments

आप बस इस पंक्ति को शामिल कर सकते हैंimport * as $ from "jquery";

— जुबिक

Answer 1

सबसे अधिक संभावना है कि आपको अपने प्रोजेक्ट के लिए jQuery - in में टाइपस्क्रिप्ट डिक्लेरेशन फ़ाइल को डाउनलोड करने और शामिल करने की आवश्यकता है jquery.d.ts।

विकल्प 1: @ पैकेज पैकेज (टीएस 2.0+ के लिए अनुशंसित) स्थापित करें

अपने पैकेज के रूप में एक ही फ़ोल्डर में । फाइल फ़ाइल, निम्न कमांड चलाएँ:

npm install --save-dev @types/jquery

फिर संकलक स्वचालित रूप से jquery के लिए परिभाषाओं को हल करेगा।

विकल्प 2: मैन्युअल रूप से डाउनलोड करें (अनुशंसित नहीं)

इसे यहाँ डाउनलोड करें ।

विकल्प 3: टाइपिंग का उपयोग करना (प्री टीएस 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

---

परिभाषा फ़ाइल सेट करने के बाद, $सामान्य टाइप के रूप में इसका उपयोग करने के लिए वांछित टाइपस्क्रिप्ट फ़ाइल में उपनाम ( ) आयात करें ।

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

आप के साथ संकलित करने के लिए आवश्यकता हो सकती है --allowSyntheticDefaultImportsजोड़ें "allowSyntheticDefaultImports": trueमें tsconfig.json ।

पैकेज भी स्थापित करें?

यदि आपके पास jquery स्थापित नहीं है, तो आप संभवतः इसे npm के माध्यम से एक निर्भरता के रूप में स्थापित करना चाहते हैं (लेकिन यह हमेशा ऐसा नहीं होता है):

npm install --save jquery

Comments

काम करने के लिए इसके लिए विजुअल स्टूडियो को रीबूट करना पड़ा, छोटा कदम लेकिन मुझे थोड़ी सी कोशिश की।

— विलियम हॉली

@daslicht इस प्रश्न की

— डेविड शेरेट

दूसरों की मदद करने के लिए: फिर आपको सिर्फ jquery स्थापित करने की आवश्यकता है: npm jquery स्थापित करें और इसे आयात $ = आवश्यकता ('jquery') के साथ प्रयोग करें;

— जोनाथन

यह भी उपयोग कर सकते हैंimport * as $ from 'jquery'

— gldraphael

मुझे त्रुटि हो रही हैError TS1192 Module '"jquery"' has no default export.

— कार्तिक

Answer 2

मेरे मामले में मुझे ऐसा करना पड़ा

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

Answer 3

के लिए दृश्य स्टूडियो कोड

मेरे लिए क्या काम करता है यह सुनिश्चित करने के लिए कि मैं सूचकांक में एक <script> टैग के माध्यम से मानक JQuery लाइब्रेरी लोडिंग कर रहा हूं ।

Daud

npm install --save @types/jquery

अब JQuery $ फ़ंक्शन सभी .ts फ़ाइलों में उपलब्ध हैं, किसी अन्य आयात की आवश्यकता नहीं है।

Comments

आपको अपने कंपोनेंट में Jquery / $ की घोषणा करने की आवश्यकता है, यदि TsLint इन प्रकारों की जाँच के लिए चालू है। उदाहरण के लिए। javascript declare var jquery: any; declare var $: any;

— फोनियाक्स

@ सुब्रतो, आपका सुझाव ठीक काम कर रहा है। उत्तर के रूप में रखो। धन्यवाद।

— yW0K5o

Answer 4

मेरा मानना ​​है कि आपको JQuery के लिए टाइपस्क्रिप्ट टाइपिंग की आवश्यकता हो सकती है। चूंकि आपने कहा था कि आप विज़ुअल स्टूडियो का उपयोग कर रहे हैं, इसलिए आप उन्हें प्राप्त करने के लिए Nuget का उपयोग कर सकते हैं।

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

Nuget Package Manager कंसोल में कमांड है

Install-Package jquery.TypeScript.DefinitelyTyped

अपडेट: जैसा कि टिप्पणी में बताया गया है कि यह पैकेज 2016 से अपडेट नहीं किया गया है। लेकिन आप अभी भी https://github.com/DefinitelyTyped/DefinitelyTyped पर अपने Github पेज पर जा सकते हैं और प्रकार डाउनलोड कर सकते हैं। अपनी लाइब्रेरी के लिए फ़ोल्डर नेविगेट करें और फिर index.d.tsवहां फ़ाइल डाउनलोड करें । इसे अपने प्रोजेक्ट डायरेक्टरी में कहीं भी रखें और वीएस को इसे तुरंत इस्तेमाल करना चाहिए।

Comments

निश्चित रूप से Types के लिए नगेट पैकेज का रखरखाव नहीं किया जाता है। ऐसा करने पर आपको एक पुराना वर्जन मिलेगा।

— डेव जोंग

Answer 5

कोणीय सीएलआई 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"
    ]
}

Comments

संपत्ति 'मोडल' 'JQuery <HTMLElement>' प्रकार पर मौजूद नहीं है। जोड़ने के बाद यह त्रुटि हो रही है

— user2900572

Answer 6

अद्यतन 2019:

डेविड द्वारा उत्तर , अधिक सटीक है।

टाइपस्क्रिप्ट 3 पार्टी विक्रेता पुस्तकालयों का समर्थन करता है, जो निश्चित रूप से प्रमाणित रेपो का उपयोग करते हुए पुस्तकालय विकास के लिए टाइपस्क्रिप्ट का उपयोग नहीं करते हैं ।

---

यदि आप यह घोषणा करने की आवश्यकता है jquery/ $अपने घटक में, तो tsLint प्रकार Checkings के इन प्रकार के लिए पर है।

उदाहरण के लिए।

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

Comments

"अगर उनके पास अपना टाइपिंग स्थापित है" तो मुझे नहीं मिलता। आप मतलब है स्थापित नहीं? उन्हें किसी और के रूप में क्यों घोषित करें? मैं सिर्फ त्रुटियों के बिना संकलित करना चाहता हूं और कोई अतिरिक्त सामान स्थापित नहीं करना चाहता हूं और मैं उन कामों के साथ काम कर रहा हूं जिनमें कोई प्रकार स्थापित नहीं है।

— लालनिमलवार

@redanimalwar मुझे लगता है कि मैंने लिखा है कि, क्योंकि वेबजैसेज़ जैसे प्रॉजेक्ट्स / कोणीय, अगर वेबपैक मैन्युअल रूप से कॉन्फ़िगर किया गया है, तो 3 पार्टी लाइब्रेरीज़ को वैश्विक स्तर पर परिभाषित किया जाता है, और वेबपैक को यह बताना मुश्किल होता है कि ये लाइब्रेरी कहाँ से आयात की जाती हैं, इस प्रकार declareकीवर्ड का उपयोग किया जाता है। लेकिन, फिर भी हम vscode को टाइपिंग के बारे में बता सकते हैं यदि वे मौजूद हैं node_modules, इसीलिए टाइपिंग को intellisense में मदद मिलती है, लेकिन वेनिला वेबपैक प्रोजेक्ट के लिए, बिना declareकीवर्ड प्रोजेक्ट ट्रांसप्लिकेशन विफल रहता है। मैंने लोगों को भ्रमित न करने के लिए अपने बयान को उत्तर से हटा दिया है।

— फोनियाक्स

वैसे भी, मैंने लंबे समय से एंगुलर / टाइपस्क्रिप्ट के साथ काम नहीं किया है, लेकिन मुझे लगता है, यदि टाइपिंग स्थापित हो, तो हम कुछ इस तरह से कर सकते हैं - import JQuery from 'jquery'; declare var $: JQuery;। यकीन नहीं है, अगर यह काम करेगा।

— फोनियाक्स

मैं का उपयोग कर दिया गया है - typescriptlang.org/docs/handbook/... , tsconfig में, 3 पार्टी प्रकार के मुद्दों को दबाने के लिए।

— फोनियाक्स

Answer 7

यदि आप एक वेब एप्लिकेशन (जैसे रिएक्ट) में jquery का उपयोग करना चाहते हैं और 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"];

इसलिए, आपको दूसरी बार (साथ npm install --save jquery) jquery लोड करने की आवश्यकता नहीं है, लेकिन टाइपस्क्रिप्ट के सभी फायदे हैं

Answer 8

यहाँ मेरा टाइपस्क्रिप्ट और 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 !')
    }
}

यह रेशमी चिकनी है !!!

Comments

इसलिए, इसे हर घटक ts फ़ाइल में लिखना है?

— विनम्र डोलट

@HumbleDolt यदि आप umble विंडो umble पर jQuery बाँधते हैं, तो आपको बस अपने declare global { interface Window { $ :JQueryStatic; } }TypeDeclaration.d.ts में जोड़ने की आवश्यकता है । और ठीक से विचार करने में, आपको यह जांचने की आवश्यकता है कि क्या $ properly विंडो properly में घुड़सवार है या नहीं। जैसे import $ = require('jquery'); window.$ = $ ;, या आपके jQuery के】 $ tag को बाहरी स्क्रिप्ट टैग द्वारा माउंट किया गया है।

— लांसर.यैन

तुम्हारा मतलब है, index.html में एक स्क्रिप्ट शामिल कर सकते हैं और वहाँ लिख सकते हैं? typeDeclaration.ts कोणीय 8 में? वहाँ tsconfig.json है

— विनम्र Dolt

@HumbleDolt तो, आप दूसरे समाधान की कोशिश कर सकते हैं import $ = require('jquery') ; window.$ = $;। (आप अपनी परियोजना के प्रारंभ बिंदु में इसे सबसे अच्छी तरह से init करेंगे। और मैं sdkसभी बाहरी lib की आवश्यकता और एक फ़ाइल या स्थान पर प्रारंभिक प्रबंधन करने के लिए एक dir बनाना पसंद करता हूं )।

— लांसर.यैन

@HumbleDolt T yourTypeDeclaretion.d.ts D केवल एक टाइप-डिफ़ाइंड फ़ाइल है। यह अपने स्वयं के प्रकारों को परिभाषित करने के लिए एक विशेष फ़ाइल है। टाइपस्क्रिप्ट में, टाइप-पहचान और ट्रू-कोड को अलग करने के लिए Type .d.ts 【केवल एक स्पष्ट अलगाव तरीका है। आप ts .ts, फ़ाइल में टाइप-डिक्लेरेशन-स्निपेट भी लिख सकते हैं, यह अभी भी काम करेगा। (शायद कुछ व्याकरण फिक्स नोटिस के साथ)

— लांसर.इन

Answer 9

मेरे लिए यह काम अब और आज एंगुलर संस्करण 9 में है

1. Npm इस के माध्यम से स्थापित करें: npm i @ प्रकार / jquery बस जोड़ - save को विश्व स्तर पर सेटअप करें।
2. Tsconfig.app.json पर जाएं और सरणी "प्रकार" jquery में जोड़ें।
3. एनजी सेवा और किया।

Answer 10

यह मेरे लिए काम करता है:

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

Comments

यह काम करेगा लेकिन दृढ़ता से टाइप नहीं करेगा, जो कि टाइपस्क्रिप्ट के साथ इसका उपयोग करने के लाभों को खो देता है यदि आप बाहरी पुस्तकालयों के लिए काम करेंगे। अभी भी काफी दिलचस्प दृष्टिकोण।

— 1919