17

TypeScript モジュールに jquery AMD モジュールを要求するにはどうすればよいですか。たとえば、スクリプトのディレクトリ構造が次のようになっているとします。

    jquery-1.8.2.js
    jquery.d.ts
    module.ts
    require.js

module.ts から生成された js ファイルで、require.js 経由で jquery-1.8.2.js をロードする必要があります。

現在私は持っています:

    import jquery = module('jquery')

これにより、「jquery」という名前は現在のスコープに存在しません。

4

5 に答える 5

27

TYPESCRIPT 1.7+ の場合

標準が再び変更されているように見えます.0.9以降の方法は引き続き機能しますが、ES6が登場すると、次のモジュールのロードが使用される可能性があります. (参考: https://github.com/TypeStrong/atom-typescript/issues/237#issuecomment-90372105 )

import * as $ from "jquery";

部分的なものでも

import {extend} from "jquery"; 

(tsdがインストールされている場合、これにはまだjquery.d.tsが必要です- tsd install jquery

tsd をインストールするには:npm install tsd -g

TYPESCRIPT 0.9+ の場合

/// <reference path="../../typings/jquery/jquery.d.ts" />
import $ = require('jquery');

//Do your stuff

また、jquery.d.ts が外部モジュールを定義していない場合は、次を jquery.d.ts に追加します。

declare module "jquery" {
    export = $;
}
于 2013-09-01T20:04:48.823 に答える
8

importこれに関する多くの混乱は、jQueryが実際には外部モジュールのように機能しておらず、ステートメントの使用を妨げているためだと思います。解決策は非常にクリーンでシンプルでエレガントなので、回避策のようには感じられません。

TypeScriptでRequireJSとjQueryを使用する簡単な例を作成しました。これは次のように機能します...

RequireJSとjQueryのDefinitelyTypedから型定義を取得します。

TypeScriptファイル内で静的型付けを行う生のRequireJSを使用できるようになりました。

app.ts

///<reference path="require.d.ts" />
///<reference path="jquery.d.ts" />

require(['jquery'], function ($) {
    $(document).ready(() => {
        alert('Your code executes after jQuery has been loaded.');
    });
});

そして、ページに1つのスクリプトタグを追加するだけで済みます。

<script data-main="app" src="require.js"></script>

他のソリューションに勝るメリットはありますか?

  1. jQueryとRequireJSを個別に更新できます
  2. 更新されているshimプロジェクトに依存する必要はありません
  3. .d.tsjQuery(またはファイルを持っている「モジュール」のようなものではないもの)を手動でロードする必要はありません
于 2013-01-26T13:44:08.627 に答える
6
  1. TS ソース ( TypeScriptFile )から基本的な jquery.d.ts を取得します。
  2. 次のように、() 宣言を JQueryStatic からモジュールに移動します。
  3. コード モジュールで jQuery をインポートします。

import $ = module("jquery");

declare module "jquery" {
   export function (selector: string, context?: any): JQuery;
   export function (element: Element): JQuery;
   export function (object: { }): JQuery;
   export function (elementArray: Element[]): JQuery;
   export function (object: JQuery): JQuery;
   export function (func: Function): JQuery;
   export function (): JQuery;
}
  1. モジュールを AMD としてコンパイルします (tsc --module amd my_code.ts)
  2. 次の構成セクションを使用して、requirejs を使用してクライアント側でアプリを構成します。

requirejs.config({
   paths: {
      'jquery': 'js/jquery-1.8.2.min'
   }
});
于 2012-10-09T14:59:38.680 に答える
1

最初に、公式の github リポジトリから( require-jquery ) を取得します。この後、ディレクトリは次のようになります。

require-jquery.js
jquery.d.ts
main.ts
main.js
test.html

現在、TypeScript で JQuery および AMD モジュールを操作する最も簡単な方法は、main.ts に次のように記述することです。

///<reference path="jquery.d.ts" />
declare var require;
require(["jquery"], function($:JQueryStatic) {
    $('body').append('<b>Hello JQuery AMD!</b>');
});

そして、test.html から呼び出します。

<!DOCTYPE html>
<html>
    <head>
        <script data-main="main" src="require-jquery.js"></script>
    </head>
    <body>
        <h1>TypeScript JQuery AMD test</h1>
    </body>
</html>

お役に立てれば!

于 2012-10-06T21:40:13.870 に答える
0

You reference external modules by path and filename (minus the .js extension), or just by filename if they are global. In your case, you should do this inside of module.ts:

import jquery = module('./jquery-1.8.2');

Remember to compile with --module AMD since by default you'll get code that uses the commonjs require function.

于 2012-11-01T00:37:04.280 に答える