web-dev-qa-db-ja.com

TypeScriptでAMDを介してjqueryを要求する方法

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

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

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

現在私は持っています：

 
 import jquery = module（ 'jquery'）

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

requirejstypescript
16
Mizzle-Mo

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

TypeScript0.9以降の場合

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

//Do your stuff

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

declare module "jquery" {
    export = $;
}
26
Poul K. Sørensen

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

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

RequireJSとjQueryのタイプ定義は Definitely Typed から取得します。

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.');
    });
});

そして、あなたはあなたのページに単一のスクリプトタグを追加する必要があるだけです：

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

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

  1. JQueryとRequireJSを個別に更新できます
  2. 更新されているshimプロジェクトに依存する必要はありません
  3. JQuery（または.d.tsファイルがある「モジュールのような」ものではないもの）を手動でロードする必要はありません。
8
Fenton
  1. TSソースから基本的なjquery.d.tsを取得します（ TypeScriptFile ）
  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'
   }
});
6
IgorM

まず、公式の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>

お役に立てれば！

1
Murat Sutunc

外部モジュールは、パスとファイル名（.js拡張子を除く）で参照するか、グローバルの場合はファイル名だけで参照します。あなたの場合、module.ts内でこれを行う必要があります。

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

デフォルトではcommonjsrequire関数を使用するコードを取得するため、--module AMDでコンパイルすることを忘れないでください。

0
nxn