如何在Typescript 1.0中導入jquery的定義文件？

我在網上搜索，但找不到任何工作，大多數文章已過時。如何在Typescript 1.0中導入jquery的定義文件？

我想要做的是在另一個打字稿文件中包含jQuery的定義文件。

我正在Intellij IDEA Ultimate 13.1中工作。下面是代碼：

Foo.ts

import jquery = require("./jquery");

我在同一目錄下的jquery.d.ts爲Foo.ts

輸出編譯時，我得到的是：

/opt/local/bin/tsc --sourcemap --module amd Foo.ts 
/.../Foo.ts(1,1): error TS2071: Unable to resolve external module '"./jquery"'. 
/.../Foo.ts(1,1): error TS2072: Module cannot be aliased to a non-module type.

它與它是一個定義文件有關。導入正常的ts文件工作正常。我嘗試使用here找到的建議，但從那時起語法已經改變。

任何幫助表示讚賞。

來源

2014-09-27 thed0ctor

聲明文件需要以不同的方式引用。

首先，包含對聲明文件的引用。編譯器將解析它，並知道存在一個名爲jquery¹的模塊，但它將在運行時通過其他方式提供。

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

然後，改變你的require調用其名，而不是它的名來加載jquery模塊：

import jQuery = require('jquery');

當編譯器解析這條線，它會嘗試生成加載該模塊所需的代碼。它將查詢其已知的模塊列表，在其中找到jquery，並從聲明文件中加載模塊的詳細信息以進行類型檢查。

生成的加載代碼將與正常模塊的加載代碼相同，並且將require.js的責任將該模塊名稱轉換爲正確的文件名。如果模塊名稱不匹配，它的文件名（或文件是在另一個目錄），你必須tell require.js which file this module corresponds to：

require.config({ 
    ... 
    paths: { 
     "jquery": "dir/lib/jquery" 
    }

}）;

¹在這裏，我假設你的聲明文件是從DefinitelyTyped，其中出口模塊稱爲jquery之一。如果它是不同的文件，導出的模塊名稱可能會不同。

旁註：我已經寫打字稿代碼的IntelliJ都和Visual Studio Express的，在我看來，後者手中奪了下來，的IntelliJ與TS一些奇怪的行爲。如果你在Windows上，我建議嘗試VS，但似乎這不是一個選項。

來源

2014-09-27 06:13:33 DCoder

感謝您的幫助！我這樣做了，但現在瀏覽器控制檯給出了一個'GET'未捕獲的腳本錯誤。我認爲這是抱怨，它無法找到jquery.js。有任何想法嗎？ – thed0ctor 2014-09-27 07:06:41

很難說只有這麼多的信息。什麼是實際的錯誤，你能看到在網絡選項卡jquery.js的請求，並檢查它是否得到正確的響應？ – DCoder 2014-09-27 07:23:55

我在看javascript控制檯。我通過下載jQuery的JavaScript文件（這是否真的有必要？）並將它放入Foo的目錄中，將其稱爲dir。現在該部分解決了有沒有辦法將jquery文件移動到另一個目錄，比如'lib'？我試着這樣做，並改變了''reference'行，但是當我這樣做時，控制檯抱怨無法在Foo的文件夾中找到jquery.js，而應該查看'dir/lib'。 – thed0ctor 2014-09-27 07:43:21

好幾個小時後，我終於搞清楚我想做什麼。

這就是我如何「優雅」進口正常.ts和.d.ts文件

我想說的是，這些網頁在我的搜索幫助廣泛：

http://www.codebelt.com/typescript/typescript-amd-with-requirejs-tutorial/ http://www.codeproject.com/Articles/528295/ModularizationplusinplusTypeScript

我使用Intellij IDEA Ultimate 13.1.4和TypeScript 1.0.0

我在Intellij中的文件觀察器參數是--sourcemap --module amd $FileName$

我學到的東西（希望這可以幫助別人剛剛開始）：

好吧，你既需要的JavaScript和TS文件，使像jQuery的工作庫（即.d.ts文件）。

我在下面發表的ts文件是逐字的。例如在Pony.ts中，頂部沒有引用標籤，這是故意的。

我的目錄佈局是：

..\ 
    Website\ 
      \js 
      jquery.js 
      jquery-ui.min.js 
      require.js 
      \ts 
      \lib 
       Animal.ts 
       Pony.ts 
       collections.ts <--- from: https://github.com/basarat/typescript-collections 
       jquery.d.ts  <----- 
       jqueryui.d.ts <---- |--- from DefinatelyTyped: https://github.com/borisyankov/DefinitelyTyped 
       require.d.ts <----- 
       Main.ts 
       Config.ts 
      \css 
       ... 
      ... 
      Index.html

當然產生js文件是有他們的尊敬目錄以及與。 的index.html

<!DOCTYPE html> 
<html> 
<head lang = "en"> 
    <meta charset = "UTF-8"> 
    <title></title> 
    <script data-main="ts/Config" src="js/require.js"></script> 

    <link rel="stylesheet" href="css/style.css"> 
...

Config.ts

///<reference path="./MainApp.ts" /> 
///<reference path="./lib/require.d.ts" /> 

require.config({ 
    baseUrl: './', 
    paths: { 
     'jquery': 'js/jquery', 
     'jqueryui': 'js/jquery-ui.min', 
     'collections': 'ts/lib/collections', 
     'Main':'ts/Main', 
     'Animal':'ts/lib/Animal', 
     'Pony':'ts/lib/Animal' 
    } 
}); 

require(['Main'], (Main) => { 
    var startApp = new Main(); 
    startApp.main(""); 
});

Main.ts

///<reference path="./lib/jquery.d.ts" /> 
import Pony = require("ts/lib/Pony"); 
import $ = require("jquery"); 
class Main { 

    public main(args:string[]):void { 
     $(document).ready(function() { 
      console.log("helloo!"); 
      var pony:Pony = new Pony("bobb"); 
      var pony2:Pony = new Pony("Anthony"); 
      pony.bite(); 
      pony2.bite(); 
     }); 
    } 

} 

export = Main;

說明：無論出於何種原因，編譯器同時接受import Pony = require("**ts/**lib/Pony")和import Pony = require("lib/Pony")。所以基本上這個類的主腳本中的需求需要一個相對於Index.html頁面更「完整」的路徑。不知道爲什麼，鼓勵評論。此外，爲什麼import $ = require("jquery");工作沒有一個「豐滿」的道路困惑着我，但無論如何。在繼續：

Pony.ts

import Animal = require("Animal"); 

class Pony extends Animal { 
    bite() { 
     alert("II, " + this.name + " have bitten you!"); 
    } 
} 

export = Pony;

Animal.ts

class Animal { 
    name:string; 
    constructor(name:string) { 
     this.name = name; 
     console.log("animal"); 
    } 
} 

export = Animal;

由於提供的第一個鏈接中提到，你需要有export = ClassName在文件底部。我試着做export class ClassName ...，但沒有奏效。

來源

2014-09-28 04:06:34 thed0ctor

如何在Typescript 1.0中導入jquery的定義文件？

回答

相關問題