如何爲我的TypeScript模塊需要jquery AMD模塊。例如假設腳本的目錄結構是這樣的：如何在TypeScript中通過AMD要求jquery

 

    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的」並不在當前範圍存在。

來源

2012-10-06 Mizzle-Mo

首先從官方GitHub庫得到（require-jquery）。在這之後你的目錄看起來像：

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

目前最簡單的方法使用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-06 21:40:13

這不是Main.ts或Main.js.我需要一個模塊（module.ts）來要求和加載jQuery，並且仍然可以將Module.ts作爲單獨的模塊被Typescript看到。你的解決方案看起來像它可以用於我的入口點，但我需要在不是入口點的模塊中使用jquery。 –

您可以將相同的邏輯應用於github頁面上的其餘jquery-require-sample：https://github.com/jrburke/require-jquery/tree/master/jquery-require-sample 只需更改require聲明和你很好去 –

@Murat - Typescript應該是模仿你爲模塊語句生成你需要的語句。我覺得骯髒這樣做:) –

採取從TS源的基本jquery.d.ts（TypeScriptFile）
移動從JQueryStatic的（）聲明成這樣的模塊：
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; 
}

編譯您模塊作爲AMD（TSC --module AMD MY_ code.ts）

使用requirejs與以下配置部分組成客戶端上你的應用程序：

requirejs.config({ 
    paths: { 
     'jquery': 'js/jquery-1.8.2.min' 
    } 
});

來源

2012-10-09 14:59:38 IgorM

至少這個作品。希望我們可以更新https://github.com/Diullei/tsd中的jquery.d.ts文件以匹配。 –

您可以通過路徑和文件名（不包含擴展名爲.js引用外部模塊），或者如果它們是全球性的，則僅通過文件名。在你的情況，你應該這樣做module.ts內：

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

記住默認情況下，你會得到一個使用CommonJS的require功能代碼--module AMD編譯自。

來源

2012-11-01 00:37:04 nxn

我不認爲這是有效的，因爲jquery.d.ts沒有聲明一個外部的jquery模塊：'declare module「jquery」{}'。它只聲明全局變量 –

我想了很多解決這個問題的混亂是由於jQuery的不是真的像個外部模塊，從而抑制了使用import聲明。該解決方案非常乾淨，簡單而優雅，足以讓您感覺不到解決方案。

我已經寫了的Using RequireJS and jQuery in TypeScript一個簡單的例子，它的工作原理如下...

您抓住從Definitely Typed爲RequireJS和jQuery的類型定義。

您現在可以在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>

效益比其他解決方案？

您可以更新jQuery和RequireJS獨立
你不必依靠墊片正在更新的項目
您不必手動加載的jQuery（或其他任何東西，不是「像模塊」你有一個.d.ts文件）

來源

2013-01-26 13:44:08 Fenton

要求js缺少回購。找不到。 – atilkan

@emrah它在這裏：https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/requirejs/require.d.ts – Fenton

FOR打字稿1.7+

它看起來像標準的再次發生變化，其中低於0.9+方法仍然有效，但隨着ES6的到來，可以使用以下模塊加載。（參考：https://github.com/TypeStrong/atom-typescript/issues/237#issuecomment-90372105）

import * as $ from "jquery";

，甚至部分的人

import {extend} from "jquery";

（這仍然需要jquery.d.ts，如果安裝了TSD - tsd install jquery）

安裝TSD：npm install tsd -g

FOR 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-01 20:04:48

如果我嘗試，我得到的錯誤：無法解析外部模塊''jquery'' 。並且模塊不能被別名爲非模塊類型。 – ghost23

聽起來像你沒有jquery.d.ts中的聲明模塊「jquery」。 –

發現這個問題，是完全不同的：我的jQuery庫稱爲「jquery-1.9.1」* facepalm * – ghost23

如何在TypeScript中通過AMD要求jquery

回答

FOR打字稿1.7+

FOR TYPESCRIPT 0.9+

相關問題