用Typescript和RequireJS導入jqueryui

Question

我一直無法正常使jQueryUI正常工作。在我嘗試添加jQueryUI之前，讓jQuery單獨工作就好了。考慮到jquery在require.config文件中被標記爲依賴關係，所以我現在在chrome中得到了「TypeError：jQuery不是函數（...）」，這很奇怪。

從.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"]); 

目錄樹：

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的是從來沒有在值位置使用，因此它被編譯器，這實際上是真正有用的，如果棘手省略掉，可以使許多異步加載場景更容易的行爲。

您需要的是一種告訴TypeScript執行庫導入的方法，無論它是否實際使用，也就是說，我們正在導入它的副作用。

幸運的是，打字稿有這樣這又來源於ECMAScript中

​​

應該做的伎倆進口的形式，你不應該需要jQuery的墊片，這些天（不要引用我在這，我AMD生鏽）。

所以你應該只需要以下。

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

我最初的解決方法曾經嵌入到我的問題的主體中。我將其重新發布爲符合StackOverflow編輯指南的答案。

Aluan的答案直接回答了我在這個模塊中提出的一些問題。

---

我可以手動編輯編譯的JavaScript包括「jQuery的」和「jQuery的用戶界面」模塊，並將其分配給變量修復錯誤：

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

但是，我想要的打字機編譯器自動執行此操作，或類似的設置jquery-ui和jquery作爲我的文件的依賴關係。

TypeScript採用聲明的模塊名稱並將該字符串編譯爲AMD define（）函數的依賴項參數。因此，TypeScript定義d.ts文件必須使用表示我的庫的相同字符串在require.config.js中聲明該模塊。

只需使用import語句不會觸發TypeScript編譯器的任何操作。無論哪個變量（本例中爲foo），導入到模塊/庫中的屬性都需要至少調用一次，並且不能與該範圍中的任何現有變量衝突。

早些時候，我用這條線：

import * as jQuery from "jquery-ui"

這佔據了「jQuery的」變量名，因此，jQuery的功能不再能夠被分配給該變量名稱，錯誤resulging： 「jQuery不是函數（...）」由於jquery-ui只是擴展了jQuery庫，所以我從不需要調用它。但編譯器對我來說太聰明瞭，決定實際上並沒有將jquery-ui編譯成我的define（...）中的依賴項。一旦我意識到問題，這是一個簡單的解決方法。

最終代碼

---

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

我公司生產GitHub上一個小例子使用打字稿2 ES 6個模塊和JQuery/JQuery的UI自定義插件，我希望這將有助於： https://github.com/lgrignon/typescript-es6-jquery