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

Question

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

import Backbone = module("backbone")

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

除了创建一个虚假的backbone.ts模块定义之外,还有解决方法吗？

更新:解决方案的副作用是此类代码不再有效,因为模块不再存在.它需要存在因为requirejs垫片.我所知道的唯一解决方法是拥有两个.d.ts文件.一个用于使用骨干作为导入但不包含该declare module位的文件.另一个使用/// <reference它确实包括declare module线.

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

其实还有另一种方式来处理AMD在打字稿:

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