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

Question

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

import Backbone = module("backbone")

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

除了创建假主干.ts 模块定义之外，还有其他解决方法吗？

更新：该解决方案的副作用是这样的代码不再有效，因为模块不再存在。由于requirejs shim，它需要存在。我知道的唯一解决方法是拥有两个 .d.ts 文件。一个文件使用主干作为不包含declare module 位的导入。另一个用于使用包含declare module 行的/// <reference。

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

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

Answer 1

自这个原始答案以来，TypeScript 语言发生了相当大的变化。

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

以下是导入骨干网的常见用例 - 使用来自“绝对类型”的类型信息：

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

import bb = require('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;
}

对于这个代码示例，这就是所需要的全部 - 但更多时候您会希望在运行时加载主干库...您可以使用（官方实验性）amd-dependency 注释来生成 define 函数调用以包含主干。

/// <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;
}

Answer 2

typescript中其实还有另一种处理amd的方法：

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. 向 javascript 库添加 amd 依赖项：
   /// <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;
});