僅使用環境定義導入TypeScript模塊以在amd中使用

Question

我有一個依賴Backbone的模塊。 我有一個backbone.d.ts定義但TypeScript似乎不想編譯我的模塊，除非我的

import Backbone = module("backbone")

實際上指向有效的主干模塊而不是定義文件。 我正在使用AMD加載的模塊，並為骨干網定義了一個requirejs墊片。

除了創建一個虛假的backbone.ts模塊定義之外，還有解決方法嗎？

更新：解決方案的副作用是此類代碼不再有效，因為模塊不再存在。 它需要存在因為requirejs墊片。 我所知道的唯一解決方法是擁有兩個.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

實際上還有另一種方法來處理打字稿中的 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;
});