टाइपस्क्रिप्ट और RequJS

Question

के साथ jqueryui आयात करना मुझे jQueryUI ठीक से काम करने में परेशानी हो रही है। JQueryUI जोड़ने की कोशिश करने से पहले, अकेले jQuery होने से बस ठीक काम किया।

नीचे दिए गए कोड के साथ, मुझे वर्तमान में "टाइप एरर: jQuery क्रोम में एक फ़ंक्शन (...)" नहीं मिलता है, जो अजीब बात है, क्योंकि jquery को requ.config फ़ाइल में निर्भरता के रूप में चिह्नित किया गया है।

.ts से .js में संकलन कोई त्रुटि नहीं होता है।

initApp.ts:

/// <reference path="../../../typings/jqueryui/jqueryui.d.ts"/> 
import * as jQuery from "jquery"; //Works completely fine 
import * as jQueryUI from "jquery-ui"; //Can't even find the module unless 
             //d.ts file is modified 

js को संकलित:

define(["require", "exports", "jquery-ui"], function (require, exports, jQuery) {...} 

jqueryui.d.ts:

/// <reference path="../jquery/jquery.d.ts"/> 
declare module JQueryUI { <unmodified code>} 

//Added this declare 

declare module "jquery-ui" { 
    export = jQuery; 
} 

Require.config.js:

require.config({ 
    baseUrl: "./components/", 
    paths: { 
     "jquery": "./javascripts/lib/jquery-2.1.4", 
     "jquery-ui": "./javascripts/lib/jquery-ui", 
     "go": "./javascripts/lib/go-debug" 
    }, 
    shim: { 
     "jquery": { 
      exports: "jQuery", 
     }, 
     "jquery-ui": { 
      //exports: "jQuery", //Adding this line doesn't fix the problem 
      deps: ["jquery"], 
     } 
    }, 
}); 
require(["./javascripts/initApp"]); 

012,

निर्देशिका ट्री:

typings/ 
    jquery/ 
     jquery.d.ts 
    jqueryui/ 
     jqueryui.d.ts 
web/ 
    components/ 
     javascripts/ 
      lib/ 
       jquery-2.1.4.js 
       jquery-ui.js 
       require.js 
      initApp.js 
      initApp.ts 
      require.config.js 

पूर्ण d.ts फ़ाइलों के लिए लिंक:

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/jquery/index.d.ts https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/jqueryui/index.d.ts

किसी भी मदद होगी बहुत सराहना

Answer 1

क्या होता है कि आप jQuery है जो एक निर्यात है, और jQueryUi जो jQuery आयात करता है, इसे बढ़ाता है, और फिर $.widget $ निर्यात नहीं करता है।

यही कारण है कि, के रूप में मुझे लगता है कि आप पहले ही बताया है,

import * as jQuery from 'jquery-ui'; 

समस्याग्रस्त है।

आप पर जाने के रूप में नोट करने के लिए,

import jQueryUi from 'jquery-ui'; 

काम नहीं करता क्योंकि jQueryUI एक मूल्य स्थिति में इस्तेमाल कभी नहीं किया है और इसलिए यह संकलक, जो वास्तव में वास्तव में उपयोगी है, अगर मुश्किल से elided हो जाता है, व्यवहार जो असीमित लोडिंग परिदृश्यों की संख्या को आसान बना सकता है।

लाइब्रेरी का आयात करने के लिए टाइपस्क्रिप्ट को बताने का एक तरीका यह है कि इस पर ध्यान दिए बिना कि वास्तव में इसका उपयोग किया जाता है या नहीं, इसका मतलब है कि हम इसे इसके दुष्प्रभाव के लिए आयात कर रहे हैं।

सौभाग्य से, टाइपप्रति इस तरह के एक आयात प्रपत्र जो बारी में ECMAScript

import 'jquery-ui'; 

से आता है चाल करना चाहिए है, तो आप jQuery के लिए शिम्स आवश्यकता नहीं होनी चाहिए इन दिनों (मुझे इस पर बोली नहीं है, मेरी एएमडी जंगली है)।

तो आपको केवल निम्नलिखित की आवश्यकता होनी चाहिए।

import $ from 'jquery'; 
// typescript will not remove this as the point of this syntax is: import for mutations! 
import 'jquery-ui'; 

आप अपने require.config(....) संशोधित करने की जरूरत नहीं होनी चाहिए, लेकिन मैं इसे ग़लत व्याख्या हो सकती है।

इसके अलावा, jquery-ui declarations, जो आप शायद अद्यतन करना चाहिए ध्यान दें एक निर्यात और संदर्भ jQuery एक वैश्विक जो बेकार है और .d.ts बहु संस्करण को खराब करता के रूप में घोषित नहीं करता है (अपने लिंक मृत पुनर्गठन पैकेज की वजह से था) परिदृश्य, लेकिन अपने मामले में एक व्यावहारिक रनटाइम अंतर नहीं करना चाहिए।

Answer 2

मेरा प्रारंभिक कामकाज मेरे प्रश्न के शरीर में एम्बेडेड होता था। मैं इसे स्टैक ओवरफ्लो के संपादकीय दिशानिर्देशों को पूरा करने के उत्तर के रूप में दोबारा पोस्ट कर रहा हूं।

अलुआन का उत्तर सीधे इस ब्लॉक में उत्पन्न कुछ प्रश्नों का उत्तर देता है।

---

मैं मैन्युअल रूप से संपादित संकलित जावास्क्रिप्ट दोनों "jQuery" और "jQuery ui को" मॉड्यूल शामिल करने के लिए, और उन्हें चर के बताए द्वारा त्रुटि को ठीक कर सकते हैं:

define(["require", "exports", "jquery", "jquery-ui"], function (require, exports, jQuery, jQueryUI) {...}

हालांकि, मैं चाहता था टाइपस्क्रिप्ट कंपाइलर स्वचालित रूप से ऐसा करने के लिए, या मेरी फ़ाइल की निर्भरताओं के रूप में jquery-ui और jquery दोनों सेट करने के समान कुछ।

टाइपस्क्रिप्ट घोषित मॉड्यूल नाम लेता है और एएमडी परिभाषित() फ़ंक्शन के निर्भरता पैरामीटर में स्ट्रिंग करता है। इसलिए, टाइपस्क्रिप्ट परिभाषा d.ts फ़ाइल को उसी स्ट्रिंग द्वारा मॉड्यूल घोषित करना होगा जो मेरी लाइब्रेरी को requ.config.js

में केवल एक आयात कथन टाइपस्क्रिप्ट कंपाइलर से कोई भी क्रिया ट्रिगर नहीं करता है। जो भी परिवर्तनीय (foo, इस मामले में) मॉड्यूल/लाइब्रेरी से गुणों को कम से कम एक बार बुलाए जाने की जरूरतों में आयात किया जाता है, और उस दायरे में किसी मौजूदा चर के साथ संघर्ष नहीं कर सकता है।

इससे पहले, मैं इस लाइन का इस्तेमाल किया:

import * as jQuery from "jquery-ui"

यह 'jQuery' चर नाम पर कब्जा कर लिया, और इस प्रकार, jQuery समारोह नहीं रह गया है कि चर नाम को सौंपा जा करने के लिए, त्रुटि में resulging कर रहा था: "jQuery एक फ़ंक्शन नहीं है (...)"

जैसा कि jquery-ui बस jQuery लाइब्रेरी को बढ़ाता है, मुझे इसे कभी भी कॉल करने की आवश्यकता नहीं है। लेकिन संकलक ने मुझ पर बहुत चालाक पाया और वास्तव में मेरी परिभाषा (...) में निर्भरता होने के लिए jquery-ui संकलित नहीं करने का फैसला किया। एक बार मुझे समस्या का एहसास हुआ यह एक आसान फिक्स था।

अंतिम कोड

---

initApp.ts

/// <reference path="../../../typings/jqueryui/jqueryui.d.ts"/> 
import * as jQueryUI from "jquery-ui"; 
import uiVar from "./uiVariables"; 
jQueryUI 

js को संकलित:

define(["require", "exports", "jquery-ui"], function (require, exports, jQueryUI) {...}

require.config।js

require.config({ 
    baseUrl: "./components/", 
    paths: { 
     "jquery": "./javascripts/lib/jquery-2.1.4", 
     "jquery-ui": "./javascripts/lib/jquery-ui", 
     "go": "./javascripts/lib/go-debug" 
    } 
}); 
require(["./javascripts/app"]); 

Answer 3

मैं टाइपप्रति 2 ES के साथ 6 मॉड्यूल और का उपयोग कर कस्टम प्लग इन के साथ JQuery/JQuery यूआई के लिए GitHub पर एक छोटे से उदाहरण का उत्पादन किया, मुझे आशा है कि यह मदद मिलेगी: https://github.com/lgrignon/typescript-es6-jquery