Question

我在网上搜索过，但找不到任何有效的内容，大多数文章都已过时。

我试图做的就是将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找到的建议，但从那时起语法发生了变化。

感谢任何帮助。

Answer 1

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

首先，包含对声明文件的引用。编译器将对其进行解析，并知道存在一个名为jquery¹的模块，但它将在运行时通过其他方式提供。

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

然后，更改您的require调用，以{em>名称加载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中编写了Typescript代码，并且在我看来后者获胜，IntelliJ对TS有一些奇怪的行为。如果你在Windows上，我建议尝试VS，但似乎不是一个选择。

Answer 2

好几个小时后，我终于想出了我想做的事情。

这就是我“优雅地”导入普通.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")。所以基本上这个类的主脚本中的require需要一个相对于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 ...但是没有用。

如何在Typescript 1.0中导入jquery的定义文件？

2 个答案: