TypescriptとRequireJSを使用したjqueryuiのインポート

Question

jQueryUIの正常な動作に問題があります。 jQueryUIを追加しようとする前に、jQueryだけでうまくいきました。

以下のコードでは、jqueryがrequire.configファイルの依存関係としてマークされていることを考慮すると、クロムの "TypeError：jQuery is not function（...）"というクロールが表示されます。

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

ディレクトリツリー：ファイルのフルd.tsへ

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 

リンク：

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を持っているということですエクスポートがあり、jQueryをインポートしてjQueryUiをインポートし、それを補完してから$.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は、（あなたのリンクがリストラをパッケージに起因する死んでいた）マルチバージョン.d.tsを吸引し、台無しにどのグローバルとして輸出し、参照のjQueryを宣言しませんのでご注意あなたのケースでは実用的なランタイムの違いを作るべきではありません。

Answer 2

私の初期の回避策は、私の質問の本体に埋め込まれていました。私はStackOverflowの編集ガイドラインを満たす答えとしてそれを再投稿しています。

このブロックで私が提起したいくつかの質問に、Aluanの答えが直接答えます。

---

私は手動で「jqueryの」と「jqueryの-UI」モジュールの両方が含まれるようにコンパイルされたJavaScriptを編集し、変数に割り当てることで、エラーを修正することができます。私が欲しかった、

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

しかし、 typescriptコンパイラがこれを自動的に行うか、jquery-uiとjqueryの両方を私のファイルの依存関係として設定するのに似たようなものです。

TypeScriptは宣言されたモジュール名を取り、その文字列をAMD define（）関数の依存関係パラメータにコンパイルします。したがって、TypeScript定義のd.tsファイルでは、require.config.js内のライブラリを表す同じ文字列でモジュールを宣言する必要があります。

単純にインポートステートメントを使用すると、TypeScriptコンパイラからアクションがトリガーされません。どちらの変数（この場合はfoo）でも、モジュール/ライブラリのプロパティを少なくとも1回呼び出す必要があり、そのスコープ内の既存の変数と競合することはできません。

以前、私はこの行を使用：

import * as jQuery from "jquery-ui"

は、これは「jQueryの」変数名を占領していない、ひいては、jQueryの関数がエラーにresulging、もはやその変数名に割り当てることができました。 "jQueryは関数ではありません（...）"

jquery-uiは単にjQueryライブラリを拡張しているため、呼び出す必要はありません。しかし、コンパイラは私にはあまりにもスマートになって、私の定義（...）に依存するためにjquery-uiを実際にコンパイルしないことに決めました。私が問題を理解すると、これは簡単な修正でした。

ファイナルコード

---

initApp.ts JSにコンパイル

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

：

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

require.config。私は、カスタムプラグインでES 6つのモジュールとjQuery/jQueryのUIと活字体2を使用するためのGitHubに少し例を生成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

は、私はこれが役立つことを願っています： https://github.com/lgrignon/typescript-es6-jquery