16

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

import Backbone = module("backbone")

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

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

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

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

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

2 回答 2

9

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

例如,要导入您使用的外部模块require(我的原始答案有 oldmodule关键字):

这是导入骨干网的一个常见用例 - 使用来自“绝对类型”的类型信息:

/// <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;
}
于 2012-10-22T14:47:39.420 回答
7

中实际上还有另一种处理的方法:

  1. 克隆DefinitelyTypedGithub 存储库。它包含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;
});
于 2013-06-26T09:05:16.760 回答