仅使用环境定义导入TypeScript模块以在amd中使用

Question

我有一个依赖于Backbone的模块。 我有一个backbone.d.ts定义，但是TypeScript似乎不想编译我的模块，除非我的

import Backbone = module("backbone")

实际上指向了一个有效的backbone模块，而不是一个定义文件。我正在使用AMD加载的模块，并且已经为backbone定义了一个requirejs shim。

除了创建一个虚假的backbone.ts模块定义之外，是否有其他解决方法？

更新： 解决方案的副作用是这样的代码将不再起作用，因为模块不再存在。它需要存在的原因是requirejs shim。我所知道的唯一解决方法是拥有两个.d.ts文件。一个用于导入backbone的文件，不包括declare module部分。另一个用于使用/// <reference来包含declare module行。

/// <reference path="../dep/backbone/backbone.d.ts" />

interface IApi {
    version: number;
    Events: Backbone.Events;
}

- ryan

Answer 1

TypeScript语言自原来的答案以来有了不少变化。

例如，要导入外部模块，您使用require（我的原始答案使用了旧的module关键字）：

以下是导入backbone常见用例 - 使用Definitely Typed中的类型信息：

/// <reference path="scripts/typings/backbone/backbone.d.ts" />

import bb = require('backbone');

在类型定义中，已为您声明了backbone模块，这是允许导入有效的原因：

//... lots of code and then...

declare module "backbone" {
    export = Backbone;
}

因此，可以通过以下方式解决原始问题...

/// <reference path="scripts/typings/backbone/backbone.d.ts" />

import bb = require('backbone');

interface IApi {
    version: number;
    Events: bb.Events;
}

class Api implements IApi {
    public version = 1;
    public Events: bb.Events = null;
}

对于这个代码示例，只需要这些 - 但通常您希望在运行时加载backbone库...您可以使用（官方实验性的）amd-dependency注释来导致生成的define函数调用包括backbone。

/// <reference path="scripts/typings/backbone/backbone.d.ts" />
/// <amd-dependency path="backbone" />

import bb = require('backbone');

interface IApi {
    version: number;
    Events: bb.Events;
}

class Api implements IApi {
    public version = 1;
    public Events: bb.Events = null;
}

- Fenton

---

我正在Visual Studio中尝试真正地重现您的问题。让我看看能否解决它！ - Fenton

在我的测试中，我发现环境声明必须省略 module 块，就像 AMD 或 CommonJS 中的普通模块一样。 - Fenton

Answer 2

实际上，处理 amd 在 typescript 中还有另一种方法：

1. 克隆 DefinitelyTyped Github 仓库。它包含了 jquery.d.ts，backbone.d.ts 和许多其他的定义文件。

2. 将定义文件链接到你的 myfile.ts 文件中：
   /// <reference path="DefinitelyTyped/requirejs/require.d.ts" />
/// <reference path="DefinitelyTyped/jquery/jquery.d.ts" />

3. 添加 amd 依赖到 JavaScript 库：
   /// <amd-dependency path="jquery"/>

4. 现在你可以在 myfile.ts 文件中使用 $ 了，只需调用 require：
   var $ = require("jquery");

myfile.ts 的完整版本：

/// <reference path="DefinitelyTyped/requirejs/require.d.ts" />
/// <reference path="DefinitelyTyped/jquery/jquery.d.ts" />
/// <amd-dependency path="jquery"/>
var $ = require("jquery");

export function helloWorld() {
  $("<div>Hello World</div").appendTo(document.body);
}

如果您运行tsc --module amd myfile.ts，您将得到以下JavaScript代码：

define(["require", "exports", "jquery"], function(require, exports) {
    var $ = require("jquery");

    function helloWorld() {
        $("<div>Hello World</div").appendTo(document.body);
    }
    exports.helloWorld = helloWorld;
});

- jantimon

---

有趣，我以前没有见过 <amd-dependency />。 - ryan

<amd-dependency path="something"/>让我摆脱了错误，谢谢！ - John-Philip